Apply Row Background Style Selector in the Telerik UI for .NET MAUI DataGrid

Updated over 6 months ago

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.

C#

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:

c#

public class MyData
{
	public string Name { get; set; }

	public int Age { get; set; }

	public string City { get; set; }
}

5. Define the ViewModel:

c#

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:

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:

xaml

<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}" />

See Also

• DataGrid for .NET MAUI
• Style Selectors in DataGrid for .NET MAUI