How to Make gridview header fixed when scrolling in Master Page

Question

User-1640542475 posted

Hi

I have issue to fix header in scrolling in master Page

Please advice me.

Thank you

maideen

It is my HTML Code

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
   
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    
<div class="card  card-darkblue">
    <div class="card-header">
        <h3 class="card-title"><asp:Label ID="lblaction" runat="server" Text="Property Master"></asp:Label></h3>
    </div>
</div>
<asp:UpdatePanel id="UpdatePanel1" runat="server">
    <ContentTemplate>
        <fieldset>

                <div class="row">
                    <div class="col-lg-3">
                        <asp:TextBox ID="txtSearch" runat="server" CssClass="form-control textcolor" placeholder="search"></asp:TextBox>
                    </div>
                    <div class="col-lg-7">
                        <asp:Button ID="btnSearch" runat="server" Text="Search" CssClass="btn btn-info btnsize" />
                        <asp:Button ID="btnNew" runat="server" Text="Add" CssClass="btn btn-info btnsize"  />
                        <asp:Button ID="btnEdit" runat="server" Text="Edit" CssClass="btn btn-info btnsize"  />
                        
                    </div>
                </div>
                 <br />   
           <div>

                <div class="row">
                   <div class="col-lg-12">
                            <asp:GridView ID="GridView1" runat="server" CssClass="gridview" AutoGenerateColumns="False" 
                                BackColor="White" BorderColor="#CCCCCC" BorderStyle="None" BorderWidth="1px" CellPadding="3" 
                                PageSize="15">
                            <Columns>
                                <asp:CommandField ShowSelectButton="True">
                                <ItemStyle Width="50px" />
                                </asp:CommandField>
                                <asp:BoundField DataField="id" HeaderText="ID"/>
                                <asp:BoundField DataField="code" HeaderText="Code"/>
                                <asp:BoundField DataField="ProjectCode" HeaderText="Project Code"/>
                                <asp:BoundField DataField="PTNo" HeaderText="PT No"/>
                                <asp:BoundField DataField="LotNo" HeaderText="LotNo"/>
                                <asp:BoundField DataField="Category" HeaderText="Category"/>
                                <asp:BoundField DataField="LandType" HeaderText="Land Type"/>
                                <asp:BoundField DataField="Propertytype" HeaderText="Property Type"/>
                                <asp:BoundField DataField="District" HeaderText="District"/>
                                <asp:BoundField DataField="Measurement_Type" HeaderText=""/>
                                <asp:BoundField DataField="LandArea" HeaderText="Area"/>
                                <asp:BoundField DataField="State" HeaderText="State"/>
                                <asp:BoundField DataField="Status" HeaderText="Status"/>

                            </Columns>
                            <FooterStyle BackColor="White" ForeColor="#000066" />
                            <HeaderStyle BackColor="#006699" Font-Bold="True" ForeColor="White" />
                            <PagerStyle BackColor="White" ForeColor="#000066" HorizontalAlign="Left" />
                                <RowStyle ForeColor="#000066" />
                            <SelectedRowStyle BackColor="#669999" Font-Bold="True" ForeColor="White" />
                            <SortedAscendingCellStyle BackColor="#F1F1F1" />
                            <SortedAscendingHeaderStyle BackColor="#007DBB" />
                            <SortedDescendingCellStyle BackColor="#CAC9C9" />
                            <SortedDescendingHeaderStyle BackColor="#00547E" />
                        </asp:GridView>
                    </div>
                </div>

    <!-- Hidden column -->
                <div class="row">
                        <asp:TextBox ID="txtID" runat="server" CssClass="form-control textcolor" Visible="true" placeholder="id"></asp:TextBox>
                </div>

    <%-- Hidden Cloumn --%>  
        </fieldset>
    </ContentTemplate>
</asp:UpdatePanel>
</asp:Content>

Answer 1

User288213138 posted

Hi maideen5,

If you want the gridview header fixed and make gridview scrollable you can try to use ScrollableGridView plugin.

The code:

<script src="ScrollableGridPlugin_ASP.NetAJAX_3.0.js"></script>
    <script type="text/javascript">
        var position = 0;
        $(document).ready(function () {
            $('#<%=GridView1.ClientID %>').Scrollable({
                        ScrollHeight: 300,
                        IsInUpdatePanel: true
                    });
                });
            </script>

The result:

Best regards,

Sam

Answer 2

User-1640542475 posted

Hi Samwu

thank you for prompt reply

It works fine in normal asp.net page. But it is not work on Asp.net page with MasterPage.

please advice me

Thank you

Maideen

Answer 3

User288213138 posted

Hi maideen5,

But it is not work on Asp.net page with MasterPage

It also works fine in child page.

The code:

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <script src="../Scripts/jquery-3.3.1.js"></script>
    <script src="../GridView%20Demo/ScrollableGridPlugin_ASP.NetAJAX_3.0.js"></script>
    <script type="text/javascript">
        var position = 0;
        $(document).ready(function () {
            $('#<%=GridView1.ClientID %>').Scrollable({
                ScrollHeight: 300,
                IsInUpdatePanel: true
            });
        });
    </script>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
    <div class="card  card-darkblue">
        <div class="card-header">
            <h3 class="card-title">
                <asp:Label ID="lblaction" runat="server" Text="Property Master"></asp:Label></h3>
        </div>
    </div>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <fieldset>

                <div class="row">
                    <div class="col-lg-3">
                        <asp:TextBox ID="txtSearch" runat="server" CssClass="form-control textcolor" placeholder="search"></asp:TextBox>
                    </div>
                    <div class="col-lg-7">
                        <asp:Button ID="btnSearch" runat="server" Text="Search" CssClass="btn btn-info btnsize" />
                        <asp:Button ID="btnNew" runat="server" Text="Add" CssClass="btn btn-info btnsize" />
                        <asp:Button ID="btnEdit" runat="server" Text="Edit" CssClass="btn btn-info btnsize" />

                    </div>
                </div>
                <br />
                <div>

                    <div class="row">
                        <div class="col-lg-12">
                            <asp:GridView ID="GridView1" runat="server" CssClass="gridview" AutoGenerateColumns="False"
                                BackColor="White" BorderColor="#CCCCCC" BorderStyle="None" BorderWidth="1px" CellPadding="3"
                                PageSize="15">
                                <Columns>
                                    <asp:CommandField ShowSelectButton="True">
                                        <ItemStyle Width="50px" />
                                    </asp:CommandField>
                                    <asp:BoundField DataField="Id" HeaderText="ID" />
                                    <asp:BoundField DataField="Name" HeaderText="Code" />
                                    <asp:BoundField DataField="Age" HeaderText="Project Code" />

                                </Columns>
                                <FooterStyle BackColor="White" ForeColor="#000066" />
                                <HeaderStyle BackColor="#006699" Font-Bold="True" ForeColor="White" />
                                <PagerStyle BackColor="White" ForeColor="#000066" HorizontalAlign="Left" />
                                <RowStyle ForeColor="#000066" />
                                <SelectedRowStyle BackColor="#669999" Font-Bold="True" ForeColor="White" />
                                <SortedAscendingCellStyle BackColor="#F1F1F1" />
                                <SortedAscendingHeaderStyle BackColor="#007DBB" />
                                <SortedDescendingCellStyle BackColor="#CAC9C9" />
                                <SortedDescendingHeaderStyle BackColor="#00547E" />
                            </asp:GridView>
                        </div>
                    </div>

                    <!-- Hidden column -->
                    <div class="row">
                        <asp:TextBox ID="txtID" runat="server" CssClass="form-control textcolor" Visible="true" placeholder="id"></asp:TextBox>
                    </div>

                    <%-- Hidden Cloumn --%>
            </fieldset>
        </ContentTemplate>
    </asp:UpdatePanel>
</asp:Content>

Best regards,

Sam