Bootstrap Twitter et ASP.NET GridView
je vais avoir aproblem à l'aide de Twitter Bootstrap de mon ASP.NET application. Lorsque j'utilise le table table-striped classe css à mon asp:GridView contrôle il traite de la en-Tête de la table comme un Ligne.
My GridView
ASP.NET MarkUp
<asp:GridView ID="dgvUsers" runat="server"
CssClass="table table-hover table-striped" GridLines="None"
AutoGenerateColumns="False">
<Columns>
<asp:BoundField DataField="UserID" HeaderText="ID" Visible="false" />
<asp:BoundField DataField="Username" HeaderText="Username" />
<asp:BoundField DataField="FirstName" HeaderText="First Name" />
<asp:BoundField DataField="LastName" HeaderText="Last Name" />
</Columns>
<RowStyle CssClass="cursor-pointer" />
</asp:GridView>
Résultat
<table id="cphMainContent_dgvUsers" class="table table-hover table-striped"
cellspacing="0" style="border-collapse:collapse;">
<tbody>
<tr>
<th scope="col">Username</th>
<th scope="col">First Name</th>
<th scope="col">Last Name</th>
</tr>
<tr class="cursor-pointer">
<td>user1</td>
<td>Test</td>
<td>User 1</td>
</tr>
<tr class="cursor-pointer">
<td>user2</td>
<td>Test</td>
<td>User 2</td>
</tr>
<tr class="cursor-pointer">
<td>user3</td>
<td>Test</td>
<td>User 3</td>
</tr>
</tbody>
</table>
il devrait être comme ce
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Comment puis-je faire 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, de construire dans VS2010 Pro.
4 réponses
Vous devez définir useaccessibleheader attribut de gridview à true et puis aussi spécifier un TableSection pour être une tête à la suite de l'appel de la DataBind() méthode sur votre objet GridView. Donc, si votre grille est mygv
mygv.UseAccessibleHeader = True
mygv.HeaderRow.TableSection = TableRowSection.TableHeader
il devrait en résulter une grille formatée correctement avec thead et tbody les balises
Il y a 2 étapes pour résoudre ce problème:
Ajouter
UseAccessibleHeader="true"pour Gridview balise:<asp:GridView ID="MyGridView" runat="server" UseAccessibleHeader="true">ajouter le Code suivant au
PreRenderévénement:
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
note définir la ligne D'en-tête dans DataBound() ne fonctionne que lorsque l'objet est databound, tout autre postback qui ne databind the gridview se traduira par le retour du style de ligne d'en-tête gridview à une ligne standard. Pré-rendu fonctionne à chaque fois, assurez-vous de avoir une capture d'erreur pour quand le gridview est vide.
juste pour info, j'ai eu des borders dans la table et pour m'en débarrasser j'ai dû mettre les propriétés suivantes dans GridView:
GridLines="None"
CellSpacing="-1"
ajouter la propriété de l'en-tête show dans gridview
<asp:GridView ID="dgvUsers" runat="server" **showHeader="True"** CssClass="table table-hover table-striped" GridLines="None"
AutoGenerateColumns="False">
et dans les colonnes ajouter le modèle d'en-tête
<HeaderTemplate>
//header column names
</HeaderTemplate>