Header Ads

Creating scrollable GridView with fixed headers

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.

Asp.net page like this





Width="200px" ScrollBars="Vertical">

AutoGenerateColumns="False" DataKeyNames="ID"
DataSourceID="SqlDataSource1"
RowStyle-VerticalAlign="Bottom"
OnRowDataBound="GridView1_RowDataBound">

InsertVisible="False"
ReadOnly="True" SortExpression="ID" />
SortExpression="Name" />
SortExpression="Location" />




ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
SelectCommand="SELECT [ID], [Name], [Location] FROM [Details]">





Add below mention css style in the head section of page






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.



protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{

if (e.Row.RowType == DataControlRowType.DataRow)
{
if(e.Row.RowIndex == 0)
e.Row.Style.Add("height","40px");
}
}


No comments:

Powered by Blogger.