|
How To Customize DataGrid Items Styles
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
|