I am working with a gridview that requires both paging and horizontal/vertical scrolling while keeping the navigation bar at the bottom of the page.
When scrolling vertically, I need two things:
- The gridview headers should stay frozen.
- The gridview pagers should also remain frozen.
This means they should not scroll along with the data - only the rows should scroll.
So far, I have achieved:
<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 />