Click here to Skip to main content
15,888,060 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I have a gridview. I have to implement both Paging as well as make the page scrollable both horizontally and vertically. The page navigation bar comes at the bottom. While scrolling the page vertically, I want two things -

The gridview headers should also be freezed.
gridview pagers should also be freezed.

I mean they should not scroll along with the data. Only the rows should scroll.

I have implemented -
1. Fixed header using CSS
2. Horizontally scrollable using CSS
3. Vertically scrollable using CSS

I am not able to
1. Fix the Pager.

Please help me.

My code:

ASP.NET
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<style type="text/css">
    div#gvResultStyle
    {
        width: 500px;
        height: 350px;
        overflow: scroll;
        position: relative;
    }

    div#gvResultStyle th
    {
        background-color: Navy;
        color: White;
        top: expression(document.getElementById("gvResultStyle").scrollTop-2);
        left: expression(parentNode.scrollLeft);
        position: relative;
        z-index: 20;
    }

    .gvPager
    {
        left: 0px;
        width: 400px;
        border-right-style: solid;
        position: absolute;
        height: 10px;
        text-align: left;
        border-right-color: Navy;
    }
</style>

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<h2>
    Welcome to ASP.NET!
</h2>
<p>
    To learn more about ASP.NET visit <a href="http://www.asp.net" title="ASP.NET Website">
        www.asp.net</a>.
</p>
<p>
    You can also find <a href="http://go.microsoft.com/fwlink/?LinkID=152368&clcid=0x409"
        title="MSDN ASP.NET Docs">documentation on ASP.NET at MSDN</a>.
</p>
<div id="gvResultStyle">
<asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="False" DataKeyNames="ProductID"
    DataSourceID="SqlDataSource1" AllowPaging="true" PageSize="20" CssClass="gvResultStyle">
    <PagerSettings Position="Bottom" />
    <PagerStyle CssClass="gvPager" />
    <Columns>
        <asp:BoundField DataField="ProductID" HeaderText="ProductID" InsertVisible="False"
            ReadOnly="True" SortExpression="ProductID" />
        <asp:BoundField DataField="ProductName" HeaderText="ProductName" SortExpression="ProductName" />
        <asp:BoundField DataField="SupplierID" HeaderText="SupplierID" SortExpression="SupplierID" />
        <asp:BoundField DataField="CategoryID" HeaderText="CategoryID" SortExpression="CategoryID" />
        <asp:BoundField DataField="QuantityPerUnit" HeaderText="QuantityPerUnit" SortExpression="QuantityPerUnit" />
        <asp:BoundField DataField="UnitPrice" HeaderText="UnitPrice" SortExpression="UnitPrice" />
        <asp:BoundField DataField="UnitsInStock" HeaderText="UnitsInStock" SortExpression="UnitsInStock" />
        <asp:BoundField DataField="UnitsOnOrder" HeaderText="UnitsOnOrder" SortExpression="UnitsOnOrder" />
        <asp:BoundField DataField="ReorderLevel" HeaderText="ReorderLevel" SortExpression="ReorderLevel" />
        <asp:CheckBoxField DataField="Discontinued" HeaderText="Discontinued" SortExpression="Discontinued" />
        <asp:BoundField DataField="CategoryName" HeaderText="CategoryName" SortExpression="CategoryName" />
    </Columns>
</asp:GridView>
</div>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
    SelectCommand="SELECT * FROM [Alphabetical list of products]"></asp:SqlDataSource>
<br />
Posted

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900