Twitter Bootstrap et ASP.NET GridView

J’ai un problème avec Twitter Bootstrap depuis mon application ASP.NET. Lorsque j’utilise la classe css table table-ssortingped dans mon contrôle asp:GridView , elle traite l’en- tête de la table comme une ligne .

My GridView

ASP.NET MarkUp

          

Résultat

En-tête traité comme une rangée

 
Username First Name Last Name
user1 Test User 1
user2 Test User 2
user3 Test User 3

Ça devrait être comme ça

Ça devrait être comme ça

 
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Comment puis-je créer l’en-tête de mon asp:GridView être traité comme un en-tête par Twitter Bootstrap? Mon code est en C #, framework 4, construit dans VS2010 Pro.

Vous devez définir l’atsortingbut useaccessibleheader du gridview sur true et spécifier également une TableSection comme étant un en-tête après avoir appelé la méthode DataBind() sur votre object GridView. Donc, si votre vue de grid est mygv

 mygv.UseAccessibleHeader = True mygv.HeaderRow.TableSection = TableRowSection.TableHeader 

Cela devrait aboutir à une grid correctement formatée avec des thead et tbody

Il y a 2 étapes pour résoudre ceci:

  1. Ajouter UseAccessibleHeader="true" à la balise Gridview:

      
  2. Ajoutez le code suivant à l’événement PreRender :

 Protected Sub MyGridView_PreRender(sender As Object, e As EventArgs) Handles MyGridView.PreRender Try MyGridView.HeaderRow.TableSection = TableRowSection.TableHeader Catch ex As Exception End Try End Sub 

Remarque La définition de la ligne d’en-tête dans DataBound() ne fonctionne que lorsque l’object est databound, toute autre publication ne databind pas la grid donnera à nouveau le style de ligne d’en-tête gridview à une ligne standard. PreRender fonctionne à chaque fois, assurez-vous simplement que vous avez une erreur de capture lorsque la grid est vide.

Pour la petite histoire, j’ai des bordures dans la table et pour m’en débarrasser, je devais définir les propriétés suivantes dans GridView:

 GridLines="None" CellSpacing="-1" 

Ajouter une propriété de l’en-tête d’affichage dans la grid

   

et en colonnes append un modèle d’en-tête

  //header column names