How to Freeze (or scrollable) header for ASP:gridview in case of many columns?

Question

I am quite new to Asp.net. I am using custom paging in asp:gridview in a project (C#). I wanted to fix my gridview header (freeze or scroll-able header so that user can see header while scrolling down to the rows). I have read different solutions on internet but still unable to figure out the solution. Will be very happy if someone can guide me, thanks.

Following is my gridview code :

<div style="overflow:scroll;width:1200px; height:500px;" > 
 <asp:GridView ID="ResultGridView" runat="server" CellPadding="4" OnRowCommand="ResultGridView_OnRowCommand"  Font-Size="Small" Width="100%" ShowHeaderWhenEmpty="True" AutoGenerateColumns="False" AllowCustomPaging="True" AllowPaging="True" OnPageIndexChanging="ResultGridView_PageIndexChanging" >
     <AlternatingRowStyle BackColor="White"  HorizontalAlign="Left" Wrap="False"/>
     <EditRowStyle BackColor="#7C6F57"  CssClass="alt"/>
     <FooterStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />
     <HeaderStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" Wrap="false"  />
     <PagerSettings Mode="NumericFirstLast" FirstPageText="First" LastPageText="Last"/>
     <PagerStyle CssClass="gridViewPager" BackColor="#666666" ForeColor="White" HorizontalAlign="Left" Font-Size="Small" VerticalAlign="Middle" Wrap="False" />
     <RowStyle BackColor="#E3EAEB" HorizontalAlign="Left" />
     <SelectedRowStyle BackColor="#C5BBAF" Font-Bold="True" ForeColor="#333333" />
      <SortedAscendingCellStyle BackColor="#F8FAFA" />
      <SortedAscendingHeaderStyle BackColor="#246B61" />
     <SortedDescendingCellStyle BackColor="#D4DFE1" />
     <SortedDescendingHeaderStyle BackColor="#15524A" />
     <Columns>
         <asp:TemplateField ShowHeader="False">
             <ItemTemplate>
                 <asp:Button ID="DetailsButton"  title="Click this button to edit / add bioactivity information" CssClass="bt" runat="server" CausesValidation="false" CommandName="DetailsButton" Text="Edit" CommandArgument='<%# String.Format("{0}",  Eval("RowNumber")) %>' />
             </ItemTemplate>                 
         </asp:TemplateField>
         <asp:BoundField DataField="RowNumber" HeaderText="Row ID" htmlencode="false" ItemStyle-CssClass="gridView_hiddencol" HeaderStyle-CssClass="gridView_hiddencol" />                                        
         <asp:BoundField DataField="Compound_ID" HeaderText="Compound ID" htmlencode="false" />
         <asp:BoundField DataField="Compound_Name" HeaderText="Compound Name/Syn" ItemStyle-Wrap="false" htmlencode="false" />
         <asp:BoundField DataField="Target_ID" HeaderText="Target ID"  htmlencode="false" ItemStyle-Wrap="false" />
         <asp:BoundField DataField="Target_Pref_Name" HeaderText="Target Pref. Name" ItemStyle-Wrap="false"  htmlencode="false" />  <asp:BoundField DataField="PUBMED_ID"   HeaderText="PubMed ID" htmlencode="false" ItemStyle-CssClass="gridView_hiddencol" HeaderStyle-CssClass="gridView_hiddencol"/>
     </Columns>  
  </asp:GridView>
</div>

Answer 1

Not an answer to your particular grid, but for any table, you can clone the thead and put it on top:

document.addEventListener('DOMContentLoaded', function() {
  var div = document.getElementById('scroller'),
    table = div.querySelector('table'),
    newTable = table.cloneNode(true),
    tbody = newTable.querySelector('tbody'),
    cells = table.querySelectorAll('thead > tr > th');

  newTable.removeChild(tbody);

  newTable.style.position = 'absolute';
  newTable.style.top = table.getBoundingClientRect().top + 'px';
  newTable.style.left = table.getBoundingClientRect().left + 'px';

  [].forEach.call(newTable.querySelectorAll('thead > tr > th'), function(el, i) {
    el.style.width = cells[i].getBoundingClientRect().width + 'px';
  });

  div.style.width = (table.getBoundingClientRect().width + div.offsetWidth - div.clientWidth) + 'px';

  div.appendChild(newTable);
});

.grid {
  background-color: aqua;
}

.grid > thead {
  background-color: gray;
}

<div id="scroller" style='height: 100px; overflow-y: auto'>
  <table id="tablesorter-demo" class="grid" border="0" cellpadding="0" cellspacing="1">
    <thead>
      <tr>
        <th class="header headerSortDown">First Name</th>
        <th class="header">Last Name</th>
        <th class="header headerSortUp">Age</th>
        <th class="header">Total</th>
        <th class="header">Discount</th>
        <th class="header">Difference</th>
        <th class="header">Date</th>
      </tr>
    </thead>
    <tbody>
      <tr class="odd">
        <td>Bruce</td>
        <td>Almighty</td>
        <td>45</td>
        <td>$153.19</td>
        <td>44.7%</td>
        <td>+77</td>
        <td>Jan 18, 2001 9:12 AM</td>
      </tr>
      <tr class="even">
        <td>Bruce</td>
        <td>Evans</td>
        <td>22</td>
        <td>$13.19</td>
        <td>11%</td>
        <td>-100.9</td>
        <td>Jan 18, 2007 9:12 AM</td>
      </tr>
      <tr class="odd">
        <td>Bruce</td>
        <td>Evans</td>
        <td>22</td>
        <td>$13.19</td>
        <td>11%</td>
        <td>0</td>
        <td>Jan 18, 2007 9:12 AM</td>
      </tr>
      <tr class="even">
        <td>Clark</td>
        <td>Kent</td>
        <td>18</td>
        <td>$15.89</td>
        <td>44%</td>
        <td>-26</td>
        <td>Jan 12, 2003 11:14 AM</td>
      </tr>
      <tr class="odd">
        <td>John</td>
        <td>Hood</td>
        <td>33</td>
        <td>$19.99</td>
        <td>25%</td>
        <td>+12</td>
        <td>Dec 10, 2002 5:14 AM</td>
      </tr>
      <tr class="even">
        <td>Peter</td>
        <td>Parker</td>
        <td>28</td>
        <td>$9.99</td>
        <td>20.9%</td>
        <td>+12.1</td>
        <td>Jul 6, 2006 8:14 AM</td>
      </tr>
    </tbody>
  </table>
</div>

Then, you can adapt the code above for your particular scenario.