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

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

Ça devrait être comme ça

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

#	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:

Ajouter UseAccessibleHeader="true" à la balise Gridview:
```
  
```
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