Fixing Gridview Header While Scrolling

fixing position of gridview header while scrolling

You can try to separate the header from the content and put the header outside the scrollable content.

<div>Some Page Content </div>
    //your heading goes here
    <div style="max-height: 400px; overflow: auto;">
       //your gridview goes here
    </div>
<div>Some Page Content </div>

like this

 <div style="float: left; width: 100%;">
        <table id="Table1" runat="server" cellpadding="1" border="1" style="background-color: #FFFFFF;
            border-collapse: collapse; border-color: #999999; border-style: none; border-width: 1px;
            width: 100%;">
            <tr style="background-color: #E5E5FE">
                <th style="width: 15%;">
                    Order
                </th>
                <th style="width: 15%;">
                    Column Title
                </th>
                <th style="width: 15%;">
                    DataType
                </th>

            </tr>
        </table>
    </div>
    <div style="max-height: 200px; overflow: auto; float: left; width: 100%;">
        <asp:GridView ID="GridView2" Style="table-layout: fixed;" Width="100%" AutoGenerateColumns="false"
            AllowSorting="true" runat="server" CellPadding="4" ForeColor="#333333" GridLines="both" ShowHeader="False">
            <AlternatingRowStyle BackColor="White"     />
            <Columns>
                <asp:TemplateField >
                    <ItemTemplate>
                        <asp:Label ID="lbl" runat="server" Text='Teste'>
                        </asp:Label>
                    </ItemTemplate>
                <ItemStyle Width="15%" />
                </asp:TemplateField>
                  <asp:TemplateField >
                    <ItemTemplate>
                        <asp:Label ID="lbl" runat="server" Text='Teste'>
                        </asp:Label>
                    </ItemTemplate>
                      <ItemStyle Width="15%" />

                </asp:TemplateField>
                  <asp:TemplateField >
                    <ItemTemplate>
                        <asp:Label ID="lbl" runat="server" Text='Teste'>
                        </asp:Label>
                    </ItemTemplate>
                      <ItemStyle Width="15%" />

                </asp:TemplateField>
            </Columns>
        </asp:GridView>
    </div>

Fixed GridView Header with horizontal and vertical scrolling in asp.net

Refer Here which is 100% working

https://stackoverflow.com/a/59357398/11863405

Static Header for Gridview Control

How to align fixed grid view header with my codes?

Problem solved with reference to:

http://www.dotnetbull.com/2011/11/scrollable-gridview-with-fixed-headers.html

---

Related Topics