How to freeze the header of the girdview [gridview and column width are not fixed]

Question

I am implementing Gridview freeze header with vertical scroll bar. I tried lot of solutions that has been suggested here. But the issues are,

1. The Gridview is inside a panel ,whose width is not fixed. Its 97% .

2.The columns don't have fixed width.

I tried solution suggested in GridviewScroll.js , but the problem is with fixed width and the Gridview doesn't resize as per the window size.

I tried too many solutions but nothing works without fixed width , so i can't present that here..

Below is my existing code

         <asp:Panel ID="panel_gridholder" runat="server"  style="position:absolute;left:10px;width:97%; min-width:1020px;margin-top:3px;margin-bottom:20px;overflow:auto;" >


            <asp:GridView ID="GridView_Vehicle" runat="server" AutoGenerateColumns="False" AllowSorting="true" PagerSettings-Position="TopAndBottom"
                OnPageIndexChanging="GridView_Vehicle_PageIndexChanging" OnSorting="GridView_Vehicle_Sorting" PageSize="100"
                GridLines="None" AllowPaging="true" CssClass="mGrid" PagerStyle-CssClass="pgr" AlternatingRowStyle-CssClass="alt">
                <Columns> </Columns>
           </asp:GridView>

            <div style="height: 400px"></div>
        </asp:Panel>

Any suggestions ?

Groves

Answer 1

I'd use DataTables. Aside from doing what you want (as I far as I understand your requirements), it is mature, stable, and capable of much more besides.

I created a JsFiddle to demonstrate: https://jsfiddle.net/objo18f9/3/

In the Fiddle: the header is fixed with vertical scrolling of the contents; no specified column sizes (they will resize as you drag the middle divider (of the Fiddle) either left or right; and the table is surrounded by a div that is set to 97% of the page width (which from memory is what a Panel is rendered as in ASP.Net); and paging is turned on.

Here's the same example as a Code Snippet:

$(document).ready(function() {
  $('#example').DataTable({
    "scrollY": "200px",
    "scrollCollapse": true,
    "paging": true
  });
});

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">

<div width="97%">
  <table id="example" class="display" width="100%" cellspacing="0">
    <thead>
      <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
        <th>Start date</th>
        <th>Salary</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Tiger Nixon</td>
        <td>System Architect</td>
        <td>Edinburgh</td>
        <td>61</td>
        <td>2011/04/25</td>
        <td>$320,800</td>
      </tr>
      <tr>
        <td>Garrett Winters</td>
        <td>Accountant</td>
        <td>Tokyo</td>
        <td>63</td>
        <td>2011/07/25</td>
        <td>$170,750</td>
      </tr>
      <tr>
        <td>Ashton Cox</td>
        <td>Junior Technical Author</td>
        <td>San Francisco</td>
        <td>66</td>
        <td>2009/01/12</td>
        <td>$86,000</td>
      </tr>
      <tr>
        <td>Cedric Kelly</td>
        <td>Senior Javascript Developer</td>
        <td>Edinburgh</td>
        <td>22</td>
        <td>2012/03/29</td>
        <td>$433,060</td>
      </tr>
      <tr>
        <td>Airi Satou</td>
        <td>Accountant</td>
        <td>Tokyo</td>
        <td>33</td>
        <td>2008/11/28</td>
        <td>$162,700</td>
      </tr>
      <tr>
        <td>Brielle Williamson</td>
        <td>Integration Specialist</td>
        <td>New York</td>
        <td>61</td>
        <td>2012/12/02</td>
        <td>$372,000</td>
      </tr>
      <tr>
        <td>Herrod Chandler</td>
        <td>Sales Assistant</td>
        <td>San Francisco</td>
        <td>59</td>
        <td>2012/08/06</td>
        <td>$137,500</td>
      </tr>
      <tr>
        <td>Rhona Davidson</td>
        <td>Integration Specialist</td>
        <td>Tokyo</td>
        <td>55</td>
        <td>2010/10/14</td>
        <td>$327,900</td>
      </tr>
      <tr>
        <td>Colleen Hurst</td>
        <td>Javascript Developer</td>
        <td>San Francisco</td>
        <td>39</td>
        <td>2009/09/15</td>
        <td>$205,500</td>
      </tr>
      <tr>
        <td>Sonya Frost</td>
        <td>Software Engineer</td>
        <td>Edinburgh</td>
        <td>23</td>
        <td>2008/12/13</td>
        <td>$103,600</td>
      </tr>
      <tr>
        <td>Jena Gaines</td>
        <td>Office Manager</td>
        <td>London</td>
        <td>30</td>
        <td>2008/12/19</td>
        <td>$90,560</td>
      </tr>
      <tr>
        <td>Quinn Flynn</td>
        <td>Support Lead</td>
        <td>Edinburgh</td>
        <td>22</td>
        <td>2013/03/03</td>
        <td>$342,000</td>
      </tr>
      <tr>
        <td>Charde Marshall</td>
        <td>Regional Director</td>
        <td>San Francisco</td>
        <td>36</td>
        <td>2008/10/16</td>
        <td>$470,600</td>
      </tr>
      <tr>
        <td>Haley Kennedy</td>
        <td>Senior Marketing Designer</td>
        <td>London</td>
        <td>43</td>
        <td>2012/12/18</td>
        <td>$313,500</td>
      </tr>
      <tr>
        <td>Tatyana Fitzpatrick</td>
        <td>Regional Director</td>
        <td>London</td>
        <td>19</td>
        <td>2010/03/17</td>
        <td>$385,750</td>
      </tr>
      <tr>
        <td>Michael Silva</td>
        <td>Marketing Designer</td>
        <td>London</td>
        <td>66</td>
        <td>2012/11/27</td>
        <td>$198,500</td>
      </tr>
      <tr>
        <td>Paul Byrd</td>
        <td>Chief Financial Officer (CFO)</td>
        <td>New York</td>
        <td>64</td>
        <td>2010/06/09</td>
        <td>$725,000</td>
      </tr>
      <tr>
        <td>Gloria Little</td>
        <td>Systems Administrator</td>
        <td>New York</td>
        <td>59</td>
        <td>2009/04/10</td>
        <td>$237,500</td>
      </tr>
      <tr>
        <td>Bradley Greer</td>
        <td>Software Engineer</td>
        <td>London</td>
        <td>41</td>
        <td>2012/10/13</td>
        <td>$132,000</td>
      </tr>
      <tr>
        <td>Dai Rios</td>
        <td>Personnel Lead</td>
        <td>Edinburgh</td>
        <td>35</td>
        <td>2012/09/26</td>
        <td>$217,500</td>
      </tr>
    </tbody>
  </table>
</div>

If you tell ASP.Net to use a static Id: <asp:GridView ID="GridView_Vehicle" ClientIDMode="static" ... then you should be able to refer to your table as: $('#GridView_Vehicle').DataTable({ ... });

Ureter

Answer 2

Here's a solution for a grid with a moderate number of rows (and if you have more than that, you might want to use smaller-sized paging instead of scrolling):

Create two GridView elements with the same specification and data source, except that the second one has ShowHeader="false". Put the first inside a div with style="height:38px; overflow:hidden" (you may need to adjust the height based on the font used for your header). Put the second inside a div with style="max-height:400px; overflow:auto" (adjust the height based on how many rows you want to show). Since both tables use the same data, they should line up properly, and the second one will be scrollable. If you want to enable sorting, do it on the server to the shared data source and put the second GridView inside an UpdatePanel with an AsyncPostBackTrigger pointing to the first one. Here's the code for your example:

  <asp:Panel ID="panel_gridholder" runat="server"  style="position:absolute;left:10px;width:97%; min-width:1020px;margin-top:3px;margin-bottom:20px;" >
     <div style="height:38px; overflow:hidden">
        <asp:GridView ID="GridView_Vehicle_Header" runat="server" AutoGenerateColumns="False" ShowHeaderWhenEmpty="true" AllowSorting="true" OnSorting="GridView_Vehicle_Sorting" GridLines="None" CssClass="mGrid" AlternatingRowStyle-CssClass="alt">
            <Columns> </Columns>
       </asp:GridView>
    </div>
    <div style="max-height:400px; overflow:auto">
       <asp:UpdatePanel ID="UpdatePanel" runat="server" UpdateMode="Conditional">
          <ContentTemplate>
             <asp:GridView ID="GridView_Vehicle" runat="server" AutoGenerateColumns="False" ShowHeader="false" AllowSorting="true" OnSorting="GridView_Vehicle_Sorting" GridLines="None" CssClass="mGrid" AlternatingRowStyle-CssClass="alt">
                <Columns> </Columns>
             </asp:GridView>
          </ContentTemplate>
          <Triggers>
             <asp:AsyncPostBackTrigger ControlID="GridView_Vehicle_Header" />
          </Triggers>
       </asp:UpdatePanel>
    </div>
 </asp:Panel>

Arrowwood