DataGrid Styling
The DataGrid control provides the following Style
properties for customizing its look & feel:
-
RowBackgroundStyle
—Defines the style of each row. -
AlternateRowBackgroundStyle
—Defines the appearance style of an alternated row. -
GroupHeaderStyle
—Defines the appearance style of the group header once the DataGrid is grouped. -
SelectionStyle
—Defines the appearance settings applied to the selected DataGrid row.
Styling Properties
RowBackgroundStyle
, AlternateRowBackgroundStyle
, and SelectionStyle
are of type DataGridBorderStyle
that defines the appearance settings applied to a BorderPaintable
instance and exposes the BackgroundColor
, BorderColor
, and BorderTickness
properties.
Here is an example how to set the RowBackgroundStyle
property:
<telerikDataGrid:RadDataGrid.RowBackgroundStyle>
<telerikDataGrid:DataGridBorderStyle BackgroundColor="CadetBlue"
BorderColor="DarkOrchid"
BorderThickness="1"/>
</telerikDataGrid:RadDataGrid.RowBackgroundStyle>
An example how to set the AlternateRowBackgroundStyle
is shown below:
<telerikDataGrid:RadDataGrid.AlternateRowBackgroundStyle>
<telerikDataGrid:DataGridBorderStyle BackgroundColor="LightBlue"
BorderThickness="1"
BorderColor="BlanchedAlmond"/>
</telerikDataGrid:RadDataGrid.AlternateRowBackgroundStyle>
The SelectionStyle
property can be set as shown below:
<telerikDataGrid:RadDataGrid.SelectionStyle>
<telerikDataGrid:DataGridBorderStyle BackgroundColor="SeaGreen"
BorderColor="Wheat"
BorderThickness="2"/>
</telerikDataGrid:RadDataGrid.SelectionStyle>
The GoupHeaderStyle
property is applied once the DataGrid is grouped.
The following properties can be used for customizing the grouped DataGrid:
-
BackgroundColor
—Defines the color that fills the area within the header of the DataGridGroupHeader
. -
BorderColor
—Defines the color that fills the border region of theGroupHeader
. -
BorderThickness
—Defines the thickness of the border. -
Button Font Options
(ButtonFontAttributes
,ButtonFontFamily
,ButtonFontSize
)—Define the font options of theGroupedHeader
expand/collapse symbol. -
ButtonMargin
—Defines the margin of the expand/collapse symbol of theGroupHeader
. -
ButtonTextColor
—Defines the text color of the expand/collapse symbol of theGroupHeader
. -
CollapseButtonText
—Defines the text for the collapse state of theGroupHeader
. -
ExpandButtonText
—Defines the text for the expand state of theGroupHeader
. -
Text
alignment options (TextMargin
,VerticalTextAlignment
,HorizontalTextAlignment
)—Define the positioning for the text part of theGroupHeader
. -
TextFont
options (TextFontattributes
,TextFontFamily
,TextFontSize
)—Define the font options of theGroupHeaders
text part.
Note that once the group is applied to the DataGrid, the
GroupHeader
will appear. Also, by default, the Button of theGroupHeader
uses an internal symbol font family. To show text when the button is expanded or collapsed, instead of a symbol set a font family to theButtonFontFamily
property and define text to theExpandButtonText
andCollapseButtonText
properties. For more details, refer to the group feature of the DataGrid.
Here is an example how to apply the GoupHeaderStyle
property to the DataGrid control:
<telerikDataGrid:RadDataGrid.GroupHeaderStyle>
<telerikDataGrid:DataGridGroupHeaderStyle BorderThickness="1"
TextColor="DarkTurquoise"
BorderColor="Brown"/>
</telerikDataGrid:RadDataGrid.GroupHeaderStyle>
Here is how the DataGrid looks: