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

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

Result

Header treated as a row

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

It should be like this

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

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.

score 50 · Accepted Answer · edited Dec 28 '17 at 14:22

50

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

edited Dec 28 '17 at 14:22

zsubzwary

1,196
1
14
22

answered Sep 11 '12 at 03:59

Hazem Salama

14,891
5
27
31

3

I throws a **NullReferenceException** in the line `dgvUsers.HeaderRow.TableSection = TableRowSection.TableHeader;`. – John Isaiah Carmona Sep 11 '12 at 04:19
8

Thanks, I should just put that line after the `dgv.DataBind()` binding of data to my `GridView` and the *NullReferenceException* is now gone. It now work. Thanks again. – John Isaiah Carmona Sep 11 '12 at 05:33
@JohnIsaiahCarmona Do note that the HeaderRow will still be null when there aren't any rows to display (when the datasource is empty) – Drakarah Jan 08 '14 at 08:57
For anyone coming here later, take not that "True" should be "true" – Mar 10 '17 at 13:20

score 7 · Answer 2 · edited Sep 08 '16 at 18:31

There are 2 steps to resolve this:

Add UseAccessibleHeader="true" to Gridview tag:

<asp:GridView ID="MyGridView" runat="server" UseAccessibleHeader="true">

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.

score 4 · Answer 3 · answered Feb 25 '16 at 20:18

4

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"

answered Feb 25 '16 at 20:18

rageit

3,513
1
26
38

score 0 · Answer 4 · answered Apr 20 '18 at 15:07

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>

Twitter Bootstrap and ASP.NET GridView

My GridView

ASP.NET MarkUp

Result

It should be like this

4 Answers4