IntroductionASP.NET Gridview has the provision of providing paging, set a particular pagesize etc.. But at times our clients are too adamant to demand for scrollable gridview with a steady header.Gridview as such doesn’t have a scrollable feature . But still a work around is possible. This is being discussed in this article that provides us a convenient scrollable grid with a steady header. STEP 1- Scrollable GridView Add the gridview into a asp:Panel control <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:Panel ID="gridpanel" ScrollBars="Auto">
<asp:GridView ID="GridView1" runat="server">
</asp:GridView>
</asp:Panel>
</form>
</body>
</html>
This Panel has a scroll bar feature so it tends to scroll the grid. But our problem is not yet solved. What is the next issue- Constant header.
The above code makes the whole panel content to scroll. But most of the application needs a constant header. Is it possible? This is explained in the next section. STEP 2- Stable headerThis can be done in 2 ways 1. Add the css to the Panel
.fixedHeader
{
overflow: auto;
height: 145px;
}
table th
{
position: relative;
} And the HTML code becomes
<asp:Panel ID="gridpanel" ScrollBars="Auto">
<asp:GridView ID="GridView1" HeaderStyle-CssClass="fixedHeader" runat="server">
</asp:GridView>
</asp:Panel>2. In the above way we have added style to the Panel as a whole.Again we can achieve stable header by adding header style for the grid.
This is the style: .fixedHeader
{
background-color: aqua;
position: relative;
top: expression(this.offsetParent.scrollTop);
}
And the HTML becomes
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:Panel ID="gridpanel" ScrollBars="Auto">
<asp:GridView ID="GridView1" HeaderStyle-CssClass="fixedHeader" runat="server">
</asp:GridView>
</asp:Panel>
</form>
</body>
</html>
ConclusionThis article deals with a scrollable gridview that has a stable header.Though this is not possible as such as the gridview doesnot have a scrollable property it can be done by a work around. I hope it helps.Happy Coding. |