Apply Row Background Style Selector in the Telerik UI for .NET MAUI DataGrid
Environment
| Version | Product | Author |
|---|---|---|
| 11.0.0 | Telerik UI for .NET MAUI DataGrid | Dobrinka Yordanova |
Description
This how-to article describes how to style the alternate rows, rows, and row details in the Telerik MAUI DataGrid by using the RowBackgroundStyleSelector property.
This KB article also answers the following questions:
- How to define a style to the row details that is different than the rows and alternate rows?
- How to apply conditional styling to the rows and alternate rows in the DataGrid control?
- Can I specify different styles to the DataGrid rows, alternate rows and row details?
Solution
To define a style selector to the DataGrid rows you need to use the RowBackgroundStyleSelector property.
To apply a RowBackgroundStyleSelector you have to:
1. Create a custom class MyRowBackgroundStyleSelector that inherits from IStyleSelector.
2. Implement the SelectStyle method.
public class MyRowBackgroundStyleSelector : IStyleSelector
{
public Style RowBackgroundStyle { get; set; }
public Style AlternateRowBackgroundStyle { get; set; }
public Style RowDetailsBackgroundStyle { get; set; }
public Style AlternateRowDetailsBackgroundStyle { get; set; }
public Style SelectStyle(object item, BindableObject bindable)
{
if (item is DataGridRowInfo rowInfo)
{
// In case you want to style the row background based on the business object associated with the row.
var myitem = rowInfo.Item as MyData;
if (rowInfo.IsRowDetails)
{
return this.RowDetailsBackgroundStyle;
}
else
{
if (rowInfo.IsAlternate)
{
return this.AlternateRowBackgroundStyle;
}
else
{
return this.RowBackgroundStyle;
}
}
}
return null;
}
}
4. Create a sample data model:
public class MyData
{
public string Name { get; set; }
public int Age { get; set; }
public string City { get; set; }
}
5. Define the ViewModel:
public class ViewModel : NotifyPropertyChangedBase
{
public ViewModel()
{
this.Items = new ObservableCollection<MyData>()
{
new MyData { Name = "John" , Age = 18, City = "London"},
new MyData { Name = "Mike" , Age = 56, City = "New York"},
new MyData { Name = "Joan" , Age = 64, City = "Madrid"},
new MyData { Name = "Seiji" , Age = 23, City = "Tokyo"},
new MyData { Name = "Dobi" , Age = 21, City = "Amsterdam"},
new MyData { Name = "Gun" , Age = 34, City = "Seoul"},
new MyData { Name = "Chao" , Age = 23, City = "Nanjing"},
new MyData { Name = "Jake" , Age = 34, City = "LA"},
new MyData { Name = "Andrea" , Age = 53, City = "London"},
new MyData { Name = "Miki" , Age = 12, City = "New York"},
new MyData { Name = "Tonny" , Age = 43, City = "Seattle"},
new MyData { Name = "John" , Age = 48, City = "Chicago"},
new MyData { Name = "Eva" , Age = 22, City = "Mexico"},
new MyData { Name = "Nicki" , Age = 19, City = "Chicago"},
new MyData { Name = "Emma" , Age = 48, City = "Brazil"},
};
}
public ObservableCollection<MyData> Items { get; set; }
}
6. Define the RadDataGrid in XAML:
<telerik:RadDataGrid x:Name="datagrid"
ItemsSource="{Binding Items}"
GridLinesVisibility="None"
AutoGenerateColumns="False"
RowBackgroundStyleSelector="{StaticResource RowBackgroundStyleSelector}"
UserEditMode="Cell">
<telerik:RadDataGrid.Columns>
<telerik:DataGridToggleRowDetailsColumn />
<telerik:DataGridTextColumn PropertyName="Name" />
<telerik:DataGridTextColumn PropertyName="Age" />
</telerik:RadDataGrid.Columns>
<telerik:RadDataGrid.RowDetailsTemplate>
<DataTemplate>
<Grid Padding="12">
<Label Text="{Binding City}" />
</Grid>
</DataTemplate>
</telerik:RadDataGrid.RowDetailsTemplate>
</telerik:RadDataGrid>
7. Add MyRowBackgroundStyleSelector as resource in the Resource page of the application:
<Style x:Key="RowBackgroundStyle" TargetType="telerik:DataGridRowBackgroundAppearance">
<Setter Property="BackgroundColor" Value="#C4E6E3" />
</Style>
<Style x:Key="AlternateRowBackgroundStyle" TargetType="telerik:DataGridRowBackgroundAppearance">
<Setter Property="BackgroundColor" Value="#F2FAF9" />
</Style>
<Style x:Key="RowDetailsBackgroundStyle" TargetType="telerik:DataGridRowBackgroundAppearance">
<Setter Property="BackgroundColor" Value="#C4E6E3" />
<Setter Property="BorderColor" Value="#80CBC4" />
<Setter Property="BorderThickness" Value="0, 0, 0, 1" />
</Style>
<Style x:Key="AlternateRowDetailsBackgroundStyle" TargetType="telerik:DataGridRowBackgroundAppearance">
<Setter Property="BackgroundColor" Value="#F2FAF9" />
<Setter Property="BorderColor" Value="#80CBC4" />
<Setter Property="BorderThickness" Value="0, 0, 0, 1" />
</Style>
<local:MyRowBackgroundStyleSelector x:Key="RowBackgroundStyleSelector"
RowBackgroundStyle="{StaticResource RowBackgroundStyle}"
AlternateRowBackgroundStyle="{StaticResource AlternateRowBackgroundStyle}"
RowDetailsBackgroundStyle="{StaticResource RowDetailsBackgroundStyle}"
AlternateRowDetailsBackgroundStyle="{StaticResource AlternateRowDetailsBackgroundStyle}" />