|
How To Customize Header Of ASP.Net DataGrid
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
|