ASP.Net DataGrid Control - Specify Item Styles

ASP Components

ASP.Net
C#

Softomatix

Web Development

.NET Development

Windows Development

How To Customize Styles For Items In DataGrid

Download Source

In this article we will show you how you can customize the appearance of all rows in DataGrid. The DataGrid class exposes ItemStyle property. This property is of type, TableItemStyle. This class has the following properties that can be used to customize the appearance of an item.

BackColor
BorderColor
BorderStyle
VerticalAlign

BorderWidth
CssClass
Font
Width

ForeColor
Height
HorizontalAlign
Wrap

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 ItemStyle 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 ItemStyle 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 ItemStyle 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">
	<ItemStyle BackColor=AliceBlue BorderColor=AntiqueWhite BorderStyle=Solid BorderWidth=1>
	</ItemStyle>
</asp:DataGrid>

Prgramatic Method

We have create a private method InitializeItemStylesin our codebehind file to set the item stlye propeties.

private void InitializeItemStyles()
{
	DefaultGrid.ItemStyle.BackColor = Color.AliceBlue;
	DefaultGrid.ItemStyle.BorderColor = Color.AntiqueWhite;
	DefaultGrid.ItemStyle.BorderStyle = BorderStyle.Solid;
	DefaultGrid.ItemStyle.BorderWidth = 1;
	DefaultGrid.ItemStyle.ForeColor = Color.BlueViolet;
}

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

Home About us Contact us Comments/Queries