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

58 Points

184 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

2830 Points

1192 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
MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
- Reply
maideen5
Member

58 Points

184 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

2830 Points

1192 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

MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

‹ Previous Thread|Next Thread ›