Home
Products
Forums
Help
Publish Article
Go Freelance
How To Customize Header Of ASP.Net DataGrid
DataGrid Header customization

In this article we will show you how you can customize the header of your DataGrid control. If you look at the properties of DataGrid class, you will come across HeaderStyle property. This is the one that is responsible for formatting the output of header.

Does Header Show By Itself?

Answer to this question is, No. Unless you tell the framework that you want to show header, it won't show it. Soo how do you indicate your intent. There is another property ShowHeader in DataGrid class. You can set it to true or false indicating if you want to or you don't want to show header.

How Do I Specify The Style?

You can accomplish in three ways. First will be use of Properties view in Visual Studio .Net IDE. Click on the DataGrid in design view and then choose Properties viw. There you will see HeaderStyle section, as shown in the picture on left. There you can specify all the properties. This way all the necessary tag and its attribues will be added to aspx page containing the control.

Second way would be to driectly type in HeaderStyle tag within DataGrid control block in aspx file. And then specify the attributes like BackColor, Font, etc.

Third style will be the programatic way, in CodeBehind file. There you can set values for all the properties in HeaderStyle property. So if you want to manipulate the header style at run time, then you will definitely need to know the programtic way of doing it. But if you want to keep header style static, which is the case most of the time, then you can use the design time feature.

Design Time Method
<asp:DataGrid ID="DefaultGrid" Runat="server" ShowHeader=True>
	<HeaderStyle Font-Size="14px" Font-Bold="True" BackColor="LightSalmon"></HeaderStyle>
</asp:DataGrid>
											
Prgramatic Method

We have create a private method SetHeaderAppearancein our codebehind file to set the header stlye propeties.

private void SetHeaderAppearance()
{
	DefaultGrid.ShowHeader = true;
	DefaultGrid.HeaderStyle.BackColor = Color.LightSalmon;
	DefaultGrid.HeaderStyle.Font.Size = FontUnit.Parse("14px");
	DefaultGrid.HeaderStyle.Font.Bold = true;
}											
											

Any more steps?

No more steps. We are done. The picture at the top of the article shows the output for our simple DataGrid control

Go Freelance
Home     About us     Contact us    Copyright    Privacy Policy    Return Policy    Advertisers
Copyright © Netomatix