C# – Is it possible to show headers while scrolling the gridview

.net-2.0asp.netcgridview

I am using Gridview in my application. Grid view is binded with the data from the database with some header text. Now what i would like to have is when i scroll the grid view i would like to show the headers while moving the gridview how can i do this

This is what i wrote McArthey

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
     <link href="StyleSheet2.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:Panel ID="pnlWrapper" runat="server" Height="300px" ScrollBars="Vertical" BorderWidth="1px">                
    <asp:GridView ID="gvTheGrid" runat="server" GridLines="Both" CellPadding="3" CssClass="gvTable" AutoGenerateColumns="false" AllowSorting="true">                    
        <columns>
            <asp:BoundField DataField="id" HeaderText="id" HeaderStyle-Width="60" ItemStyle-Width="60" />
        </columns>
    </asp:GridView>
</asp:Panel>
    </div>
    </form>
</body>
</html>

stylesheet is as follows

TABLE.gvTable
{
    table-layout:fixed;
}
TABLE.gvTable TH
{    
    position:relative;
    border-top-width:0px;
    border-bottom-color:Black;
    background-color:#F5DEB3;
}

This is my sample source when i run and click on view source

  <div id="pnlWrapper" style="border-width:1px;border-style:solid;height:300px;overflow-y:scroll;">
 <div>
 <table class="gvTable" cellspacing="0" cellpadding="3" rules="all" border="1" id="gvTheGrid" style="border-collapse:collapse;">
 <tr>
<th scope="col" style="width:60px;">id</th>
</tr><tr>
<td style="width:60px;">10</td>
</tr><tr>
<td style="width:60px;">10</td>
</tr><tr>
<td style="width:60px;">10</td>
</tr><tr>

Header shown when page loads

enter image description here

No header when scrolls down

enter image description here

Best Answer

There is an example here that works on IE8.

This was very useful to me since we are moving to IE8 here at work and I needed to get this working.

There are a few tricks with using this solution. It expects to use the <thead> and <tbody> tags which are not rendered by default in the GridView. In order to render them, you'll need to add something along the lines of the following which was suggested earlier by another.

// will add <thead> and <tbody>
gvTheGrid.HeaderRow.TableSection = TableRowSection.TableHeader;

I have an example solution working here based upon that link that I sent via email.

Related Topic