Twitter Bootstrap and ASP NET GridView

Question

I am having aproblem using Twitter Bootstrap from my ASP NET application  When I use the table table-striped css class to my asp GridView control  it treats the Header of the table as a Row   My GridView  ASP NET MarkUp   lt asp GridView ID  dgvUsers  runat  server       CssClass  table table-hover table-striped  GridLines  None       AutoGenerateColumns  False  gt       lt Columns gt           lt asp BoundField DataField  UserID  HeaderText  ID  Visible  false    gt           lt asp BoundField DataField  Username  HeaderText  Username    gt           lt asp BoundField DataField  FirstName  HeaderText  First Name    gt           lt asp BoundField DataField  LastName  HeaderText  Last Name    gt       lt  Columns gt       lt RowStyle CssClass  cursor-pointer    gt   lt  asp GridView gt    Result     lt table id  cphMainContent dgvUsers  class  table table-hover table-striped          cellspacing  0  style  border-collapse collapse   gt       lt tbody gt           lt tr gt               lt th scope  col  gt Username lt  th gt               lt th scope  col  gt First Name lt  th gt               lt th scope  col  gt Last Name lt  th gt           lt  tr gt           lt tr class  cursor-pointer  gt               lt td gt user1 lt  td gt               lt td gt Test lt  td gt               lt td gt User 1 lt  td gt           lt  tr gt           lt tr class  cursor-pointer  gt               lt td gt user2 lt  td gt               lt td gt Test lt  td gt               lt td gt User 2 lt  td gt           lt  tr gt           lt tr class  cursor-pointer  gt               lt td gt user3 lt  td gt               lt td gt Test lt  td gt               lt td gt User 3 lt  td gt           lt  tr gt       lt  tbody gt   lt  table gt    It should be like this     lt table class  table table-striped  gt       lt thead gt           lt tr gt               lt th gt   lt  th gt               lt th gt First Name lt  th gt               lt th gt Last Name lt  th gt               lt th gt Username lt  th gt           lt  tr gt       lt  thead gt       lt tbody gt           lt tr gt               lt td gt 1 lt  td gt               lt td gt Mark lt  td gt               lt td gt Otto lt  td gt               lt td gt  mdo lt  td gt           lt  tr gt           lt tr gt               lt td gt 2 lt  td gt               lt td gt Jacob lt  td gt               lt td gt Thornton lt  td gt               lt td gt  fat lt  td gt           lt  tr gt           lt tr gt               lt td gt 3 lt  td gt               lt td gt Larry lt  td gt               lt td gt the Bird lt  td gt               lt td gt  twitter lt  td gt           lt  tr gt       lt  tbody gt   lt  table gt     How can I make the header of my asp GridView be treated as a Header by Twitter Bootstrap  My code is in C   framework 4  build in VS2010 Pro

User · Answer

Add property of show header in gridview

 <asp:GridView ID="dgvUsers" runat="server" **showHeader="True"** CssClass="table table-hover table-striped" GridLines="None" 
AutoGenerateColumns="False">

and in columns add header template

<HeaderTemplate>
                   //header column names
</HeaderTemplate>

User · Answer

There are 2 steps to resolve this    Add UseAccessibleHeader  true  to Gridview tag    lt asp GridView ID  MyGridView  runat  server  UseAccessibleHeader  true  gt   Add the following Code to the PreRender event     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 setting Header Row in DataBound   works only when the object is databound  any other postback that doesn t databind the gridview will result in the gridview header row style reverting to a standard row again  PreRender works everytime  just make sure you have an error catch for when the gridview is empty

User · Answer

Just for the record  I got borders in the table and to get rid of it I needed to set following properties in the GridView   GridLines  None  CellSpacing  -1

User · Answer

You need to set useaccessibleheader attribute of the gridview to true and also then also specify a TableSection to be a header after calling the DataBind   method on you GridView object  So if your grid view is mygv  mygv UseAccessibleHeader   True mygv HeaderRow TableSection   TableRowSection TableHeader   This should result in a proper formatted grid with thead and tbody tags

[c#] Twitter Bootstrap and ASP.NET GridView

Examples related to c#

Examples related to asp.net

Examples related to gridview

Examples related to .net-4.0

Examples related to twitter-bootstrap