Scrollable GridView With Fixed Headers Asp.Net

2:19:00 am 1 Comments

Scrollable gridview with fixed headers in asp.net 2.0 and 3.5.

In this example i am going to show how to create scrollable GridView with fixed headers which don't get scrolled with records and stay on the top in asp.net using css, I've tested this code on IE7 and Firefox 2.0 , 3.5.



For this we need to add css to headers of gridview to keep them on the top.

First of all place a Panel on the aspx page from thetoolbox. Set height to 200px and width to 200px
and scrollbars to Vertical.
Now add a gridview inside this Panel and set the datasource to populate gridview.












Html Source of the page look like this 
<form id="form1" runat="server">
<div>
<asp:Panel ID="Panel1" runat="server" Height="200px" 
                       Width="200px" ScrollBars="Vertical">

<asp:GridView ID="GridView1" runat="server" 
              AutoGenerateColumns="False" DataKeyNames="ID"
              DataSourceID="SqlDataSource1"
              RowStyle-VerticalAlign="Bottom"
              OnRowDataBound="GridView1_RowDataBound">
<Columns>
<asp:BoundField DataField="ID" HeaderText="ID" 
                InsertVisible="False" 
                ReadOnly="True" SortExpression="ID" />
<asp:BoundField DataField="Name" HeaderText="Name" 
                                 SortExpression="Name" />
<asp:BoundField DataField="Location" HeaderText="Location" 
                             SortExpression="Location" />
</Columns>
<HeaderStyle CssClass="header"Height="20px" />
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" 
ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
SelectCommand="SELECT [ID], [Name], [Location] FROM [Details]">
</asp:SqlDataSource>
</asp:Panel>
</div>
</form>

Now Add below mention css style in the head section of page
01<head runat="server">
02<title>Creating scrollable GridView with fixed headers</title>
03<style type="text/css">
04  .header
05  {
06    font-weight:bold;
07    position:absolute;
08    background-color:White;
09  }
10  </style>
11</head>

Build and run the code.

This code works fine but there is one bug in it , first record of GridView gets hidden behind the fixed column headers.

To fix this issue we need to set height of first row in gridview to double of height of header row or double the height of other rows of gridview. for this we need to add below mentioned code in RowDataBound event of GridView.
1protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
2    {
3 
4        if (e.Row.RowType == DataControlRowType.DataRow)
5        {
6            if(e.Row.RowIndex == 0)
7           e.Row.Style.Add("height","40px");
8        }
9    }

Now the output will be as shown in image, In my example i've set the header height to "20px" using headerStyle in html source. so i'll be setting height of first row to "40px"












Download sample code attached

Unknown

1 comment:

Subscribe to: Post Comments (Atom)