Comment faire en sorte que Gridview rende THEAD?

112

Comment obtenir le GridViewcontrôle pour rendre les <thead> <tbody>balises? Je sais .UseAccessibleHeadersqu'il le met à la <th>place de <td>, mais je ne peux pas faire <thead>apparaître le.

Andrew Bullock
la source
FYI: UseAccessibleHeader est "true" par défaut, vous n'avez donc pas besoin de le définir. msdn.microsoft.com/en-us/library/…
MikeTeeVee

Réponses:

187

Cela devrait le faire:

gv.HeaderRow.TableSection = TableRowSection.TableHeader;
Phil Jenkins
la source
69
La HeaderRowpropriété sera nulljusqu'à ce que les GridViewdonnées soient liées, assurez-vous donc d'attendre que la liaison de données se soit produite avant d'exécuter la ligne de code ci-dessus.
bdukes
6
Comme commentaire ci-dessous, avec ASP.NET 4.5 au moins après la liaison, ce n'est pas assez tard - cela fonctionne dans OnPreRender cependant.
philw
J'ai un gridview avec des sous-en-têtes personnalisés ajoutés. Chacun de ces sous-en-têtes affiche les données de la source de données. La raison pour laquelle je voulais effectuer un rendu theadest de l'utiliser dans jQuery. Cependant, après le rendu de l'en-tête, le tbodyne semble pas être disponible. Que manque-t-il dans mon cas?
bonCodigo
1
J'ai trouvé qu'il y avait encore des problèmes lors de la publication et j'ai placé le code dans l'événement lié aux données qui traitait tous les scénarios.
James Westgate
J'apporte mes données à partir d'une base de données lorsque l'utilisateur clique sur un bouton. Dans ce cas, le gridview n'a pas la balise thead. De l'aide?
touinta
25

J'utilise ceci en OnRowDataBoundcas:

protected void GridViewResults_OnRowDataBound(object sender, GridViewRowEventArgs e) {
    if (e.Row.RowType == DataControlRowType.Header) {
        e.Row.TableSection = TableRowSection.TableHeader;
    }
}
Neto Kuhn
la source
7
C'est la seule solution qui a fonctionné pour moi. Qui a conçu ces terribles contrôles?
EKW
2
J'ai inséré votre code dans l'événement OnRowCreated et je l'ai fait fonctionner correctement.
yougotiger
Il s'agit de la meilleure solution, car elle supprime le risque (et la vérification requise) que la TableSection soit nulle si aucune ligne ne se trouve dans le DataSource.
EvilDr
1
Fyi, si le GridViewest dans un UpdatePanelet qu'un async-postback est causé par un autre contrôle, l' OnRowDataBoundévénement ne sera pas déclenché, donc le code de cette réponse ne sera pas exécuté, ce qui entraînera le GridViewretour au rendu sans <thead>balises ... soupir . Pour cibler ce cas, poussez le code de la réponse acceptée dans le gestionnaire d' PreRenderévénements de gridView (un peu comme le suggère la réponse d'ASalvo ).
Mr.Z
C'est la bonne réponse, car elle utilise correctement le flux de travail WebForms.
Marcel
10

Le code dans la réponse doit continuer Page_Loadou GridView_PreRender. Je l'ai mis dans une méthode qui a été appelée après Page_Loadet j'ai obtenu un NullReferenceException.

ASalvo
la source
4
Vous pouvez également mettre en DataBoundévénement. grid.DataBound += (s, e) => { grid.HeaderRow.TableSection = TableRowSection.TableHeader; };
BrunoLM
4
Je ne sais pas si c'est différent dans .NET 4.5 maintenant ... mais j'obtiens que HeaderRow est nul dans les gestionnaires d'événements _DataBound et _PreRender. Cela peut être lié au fait que j'utilise la nouvelle fonctionnalité «Model Binding» de ASP.NET Web Forms dans le gridView.
ClearCloud8
7

J'utilise le code suivant pour ce faire:

Les ifdéclarations que j'ai ajoutées sont importantes.

Sinon (en fonction de la façon dont vous affichez votre grille), vous lancerez des exceptions comme:

Le tableau doit contenir des sections de ligne dans l'ordre d'en-tête, de corps et de pied de page.

protected override void OnPreRender(EventArgs e)
{
    if ( (this.ShowHeader == true && this.Rows.Count > 0)
      || (this.ShowHeaderWhenEmpty == true))
    {
        //Force GridView to use <thead> instead of <tbody> - 11/03/2013 - MCR.
        this.HeaderRow.TableSection = TableRowSection.TableHeader;
    }
    if (this.ShowFooter == true && this.Rows.Count > 0)
    {
        //Force GridView to use <tfoot> instead of <tbody> - 11/03/2013 - MCR.
        this.FooterRow.TableSection = TableRowSection.TableFooter;
    }
    base.OnPreRender(e);
}

L' thisobjet est mon GridView.

En fait, j'ai remplacé Asp.net GridView pour créer mon propre contrôle personnalisé, mais vous pouvez le coller dans votre page aspx.cs et référencer le GridView par son nom au lieu d'utiliser l'approche custom-gridview.

FYI: Je n'ai pas testé la logique du pied de page, mais je sais que cela fonctionne pour les en-têtes.

MikeTeeVee
la source
5

Cela fonctionne pour moi:

protected void GrdPagosRowCreated(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        e.Row.TableSection = TableRowSection.TableBody;
    }
    else if (e.Row.RowType == DataControlRowType.Header)
    {
        e.Row.TableSection = TableRowSection.TableHeader;
    }
    else if (e.Row.RowType == DataControlRowType.Footer)
    {
        e.Row.TableSection = TableRowSection.TableFooter;
    }
}

Cela a été essayé dans VS2010.

Felipe Delgado
la source
2

Je sais que c'est vieux, mais, voici une interprétation de la réponse de MikeTeeVee, pour une grille standard:

page aspx:

<asp:GridView ID="GridView1" runat="server" 
    OnPreRender="GridView_PreRender">

aspx.cs:

    protected void GridView_PreRender(object sender, EventArgs e)
    {
        GridView gv = (GridView)sender;

        if ((gv.ShowHeader == true && gv.Rows.Count > 0)
            || (gv.ShowHeaderWhenEmpty == true))
        {
            //Force GridView to use <thead> instead of <tbody> - 11/03/2013 - MCR.
            gv.HeaderRow.TableSection = TableRowSection.TableHeader;
        }
        if (gv.ShowFooter == true && gv.Rows.Count > 0)
        {
            //Force GridView to use <tfoot> instead of <tbody> - 11/03/2013 - MCR.
            gv.FooterRow.TableSection = TableRowSection.TableFooter;
        }

    }
Jonathan Harris
la source
2

Créez une fonction et utilisez cette fonction dans votre PageLoadévénement comme ceci:

La fonction est:

private void MakeGridViewPrinterFriendly(GridView gridView) {  
    if (gridView.Rows.Count > 0) {          
        gridView.UseAccessibleHeader = true;  
        gridView.HeaderRow.TableSection = TableRowSection.TableHeader;  
    }  
} 

L' PageLoadévénement est:

protected void Page_Load(object sender, EventArgs e) {
        if (!IsPostBack)
        {
            MakeGridViewPrinterFriendly(grddata);
        }
}
Rajpurohit
la source
0

Vous pouvez également utiliser jQuery pour l'ajouter. Cela évite le problème avec TableRowSection.TableHeader où est déposé sur PostBack.

$('#myTableId').prepend($("<thead></thead>").append($(this).find("#myTableId tr:first")));

Michael
la source