Columns Styling
The DataGrid component provides styling mechanism for customizing the look of the columns and their cells.
The styling mechanism is represented by the following properties:
-
HeaderStyle
(DataGridColumnHeaderStyle
) -
CellContentStyle
(Style
withTargetType
depending on the column type) -
CellDecorationStyle
(DataGridBorderStyle
) -
CellEditorStyle
(Style
withTargetType
depending on the editor type)
HeaderStyle
HeaderStyle
defines the appearance of the column header. The DataGridColumnHeaderStyle
exposes properties for styling its header, filter indicator, indicator, Options button, and sorting indicator.
Header Styling
To style the RadDataGridColumnHeader
use the following properties:
-
TextColor
andBackgroundColor
—Define the colors of the text part/background respectively. -
BorderColor
andBorderThickness
—Define the style of the border around the column header. -
Font Options
(TextFontAttributes
,TextFontFamily
,TextFontSize
)—Define the font options to the text part of theColumnHeader
. -
Text Alignment
(TextMargin
,HorizontalTextAlignment
,VerticalTextAlignment
)—Define the positioning for the text part of theColumnHeader
.
SortIndicator Styling
The Indicator
is shown once the RadDataGridColumnHeader
is sorted (tapped/clicked on the ColumnHeader
cell) and can be styled with the following properties:
-
IndicatorColor
—Defines the color for the indicator part of theColumnHeader
.
-
Indicator
font options (IndicatorFontAttributes
,IndicatoFontFamily
,IndicatoFontSize
)—Define the font options for theColumnHeader
indicator. -
IndicatorMargin
—Defines the margin of the indicator part of theColumnHeader
. -
IndicatorText
—Defines the text of the indicator part of theColumnHeader
. -
SortIndicatorAscendingText
—Defines the text of the sort indicator when the sorting is ascending. -
SortIndicatorDescendingText
—Defines the text of the sort indicator when the sorting is descending.
By default, the indicator is represented by a string symbol that can be changed by using the
IndicatorText
andIndicatorFontFamily
properties. For more details, refer to the article on sorting the DataGrid.
<telerikDataGrid:DataGridTextColumn.HeaderStyle>
<telerikDataGrid:DataGridColumnHeaderStyle BackgroundColor="LightSkyBlue"
TextColor="Black"
BorderColor="Black"
BorderThickness="2"/>
</telerikDataGrid:DataGridTextColumn.HeaderStyle>
CellContentStyle
The CellContentStyle
property defines the appearance of each cell associated with the column. The target type of the Style
object depends on the type of the column. For example, for DataGridTextColumn
it will be of the TextBlock
type. You can go to the Column Types section, for example, to check the TargetType
of each column type.
The following properties can be used to define the style of the text cell elements:
-
Font
options (FontAttributes
,FontFamily
,FontSize
)— Define the font of the cell text. -
TextColor
/SelectedTextColor
—Define the color of the cells text. You can set a different value for the selected cell. -
Text
alignment (TextMargin
,HorizontalTextAlignment
,VerticalTextAlignment
)—Define the positioning of the text inside the cell.
Here is an example how to set the CellContentStyle
property:
<telerikDataGrid:DataGridTextColumn.CellContentStyle>
<telerikDataGrid:DataGridTextCellStyle TextColor="DarkOliveGreen"
FontSize="12"
TextMargin="2"
VerticalTextAlignment="Center"
HorizontalTextAlignment="Center"
SelectedTextColor="Brown">
</telerikDataGrid:DataGridTextCellStyle>
</telerikDataGrid:DataGridTextColumn.CellContentStyle>
CellDecorationStyle
To style the border of each cell associated with the column the CellDecorationStyle
property is used. CellDecorationStyle
is of type DataGridBorderStyle
which provides the following properties—BackgroundColor
, BorderColor
, BorderTickness
.
Here is an example how to set those properties on a column:
<telerikDataGrid:DataGridTextColumn.CellDecorationStyle>
<telerikDataGrid:DataGridBorderStyle BorderColor="DarkBlue"
BorderThickness="3"
BackgroundColor="LightBlue" />
</telerikDataGrid:DataGridTextColumn.CellDecorationStyle>
CellEditorStyle
CellEditorStyle
defines the style that will be applied to the cell editor.
Here is an example how to set this property:
<telerikDataGrid:DataGridTextColumn.CellEditorStyle>
<Style TargetType="Entry">
<Setter Property="FontSize" Value="Large"/>
<Setter Property="FontAttributes" Value="Bold"/>
</Style>
</telerikDataGrid:DataGridTextColumn.CellEditorStyle>
And this is how the column style looks when the properties for customizing the column are applied: