Home
Products
Forums
Help
Publish Article
Go Freelance

How To Customize DataGrid Items Styles

DataGrid ItemsStyle customization

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

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