How to Make gridview header fixed when scrolling in Master Page[Answered] RSS

3 replies

Last post Dec 25, 2019 03:05 AM by samwu

‹ Previous Thread|Next Thread ›

Shortcuts

maideen5

Member

61 Points

189 Posts

How to Make gridview header fixed when scrolling in Master Page

Dec 24, 2019 02:45 AM|maideen5|LINK

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>

- Reply
samwu
Contributor

3370 Points

1409 Posts
Re: How to Make gridview header fixed when scrolling in Master Page

Dec 24, 2019 06:52 AM|samwu|LINK
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
.NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.
- Reply
maideen5
Member

61 Points

189 Posts

Re: How to Make gridview header fixed when scrolling in Master Page

Dec 25, 2019 02:15 AM|maideen5|LINK

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

samwu

Contributor

3370 Points

1409 Posts

Re: How to Make gridview header fixed when scrolling in Master Page

Dec 25, 2019 03:05 AM|samwu|LINK

Hi maideen5,

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

.NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.

‹ Previous Thread|Next Thread ›