Freezing Headers of the DataGrid in ASP.NET

Posted Date: 12 Jan 2005	Resource Type: Articles	Category: ASP.NET/Web Applications
Author: Bezawada Kiran Kumar	Member Level: Silver
Rating:	Points: 10

Place a datagrid control on the form and in the page load event bind the datagrid to the dataset after getting the data.(Place the datagrid in a div tag and name the div tag as div-datagrid).
Use bound columns which will be easier to bind the data.

 
private void Page_Load(object sender, System.EventArgs e)
{
        // Put user code to initialize the page here
        SqlConnection cn=new SqlConnection  
                         ("server=server-name;uid=Test;password=Test;database=database-name"); 
        cn.Open(); 
        SqlDataAdapter dad=new SqlDataAdapter("select * from emp",cn);
        DataSet ds=new DataSet();
        dad.Fill(ds,"EmpTable"); 
        DataGrid1.DataSource=ds;
        DataGrid1.DataBind(); 
}

Use the following style in the head part of the html.


<style>
DIV#div-datagrid { OVERFLOW: auto; WIDTH: 420px; HEIGHT: 200px } 
.lockrow
{ 
	BORDER-RIGHT: silver 1px solid; 
	FONT-WEIGHT: bold; 
	FONT-SIZE: 14px; ; 
	TOP: expression(document.getElementById("div-datagrid").scrollTop-2); 
	COLOR: white; 
	POSITION: relative; 
	BACKGROUND-COLOR: green; 
	TEXT-ALIGN: center;height:30 
} 
</style>

In the code behind page of the asp.net datagrid event write the following code.


private void DataGrid1_ItemDataBound(object sender,       
                System.Web.UI.WebControls.DataGridItemEventArgs e)
{
	switch(e.Item.ItemType)
	{
		case ListItemType.Header:
		for(int i=0;i<=e.Item.Cells.Count-1;i++)
		{
			e.Item.Cells[i].CssClass="lockrow";	
		}
		break;
	}
}

Responses

Author: krishna mohan 13 Jan 2005 Member Level: Silver Points : 0

Use the following style in the head part of the html.
but i didn't see that code...
plz include that code , i am trying yours logic....

thank you
kittu

Author: critic 13 Jan 2005 Member Level: Bronze Points : 0

Please check the article now.. we have updated it so that the style section is visible.

Author: Anand Fadte 04 Feb 2005 Member Level: Bronze Points : 0

I tried using the code, but still doesn't work, can u help me out

Author: Bezawada Kiran Kumar 04 Feb 2005 Member Level: Silver Points : 0

Send me the code. so that i can clarify/.

Author: Bezawada Kiran Kumar 04 Feb 2005 Member Level: Silver Points : 0

Send me the code. so that i can clarify/.And pls explain ur problem in detail.

Author: Hilmar Hilmarsson 08 Feb 2005 Member Level: Bronze Points : 0

Thank you Thank you Thank you Thank you Thank you Thank you Thank you Thank you Thank you Thank you ..... I've been looking everywhere for this. Thank you.

Author: LeninGrad 23 Feb 2005 Member Level: Silver Points : 0

This is what i am searching for all these days. Your article is excellent. I do not have any words to explain. I had been searching for this article in various web sites but no clear explanation. Thanks to dotnetspider.com to provide such a nice article.

Great applause to this guy

Author: Sue oates 27 Feb 2005 Member Level: Bronze Points : 0

Hi,
I have been searching for code to implement a fixed header datagrid.

I have attempted to implement the code provided for Freezing Headers of the DataGrid in ASP.NET in VB code.

I have made the following changes to your method Datagrid1_ItemDataBound:

Private Sub dgBasins_ItemDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.DataGridItemEventArgs) Handles dgBasins.ItemDataBound
Select Case e.Item.ItemType
Case ListItemType.Header
Dim i As Integer
For i = 0 To e.Item.Cells.Count - 1
e.Item.Cells(i).CssClass = "lockrow"
Next

End Select
End Sub

When I run this, the page header style certainly changes with green background and white font. However, the header still scrolls off the top of the div-datagrid.

I was under the understanding that the header did not scroll. Is this correct, and if so can you highlight the error in my code.

Thanks in anticipation of your help.

Author: surya phani 03 Mar 2005 Member Level: Bronze Points : 0

Hey buddy, it works, Thanks a lot. I used to set a HTML table above the grid earlier instead of using the header. Thanks to u.

Author: Jagadish Dandin 08 Sep 2005 Member Level: Bronze Points : 0

Everything is fine. But the columns in the headers cannot be differentiated. The lines that differentiate different columns disappear when this style is applied to header.

Any solution for this would be appreciated.

Thanks in advance.

Author: Jagadish Dandin 08 Sep 2005 Member Level: Bronze Points : 0

Hi
I figured out the problem. the solution suggested above works perfectly.

if we try to apply the style on the client side in the
the column lines will not be visible. If we apply the style as suggested

switch(e.Item.ItemType)
{
case ListItemType.Header:
for(i=0;i<=e.Item.Cells.Count-1;i++)
{
e.Item.Cells[i].CssClass="lockrow";
}
break;
}

it works perfectly.

regards
Jagadish

Author: Jagadish Dandin 08 Sep 2005 Member Level: Bronze Points : 0

Hi
I figured out the problem.
if we try to apply the style on the client side in the header style

the column lines will not be visible. If we apply the style as suggested in the article

switch(e.Item.ItemType)
{
case ListItemType.Header:
for(i=0;i<=e.Item.Cells.Count-1;i++)
{
e.Item.Cells[i].CssClass="lockrow";
}
break;
}

it works perfectly.