Controls / DataGrid / Styling

New to Telerik UI for .NET MAUI? Start a free 30-day trial

.NET MAUI DataGrid Style Selectors

The .NET MAUI DataGrid component exposes a conditional styling feature. It allows users to apply different styles on a cell or per group header depending on a specific condition.

Cell Style Selector

You can set a distinct style to a specific cell in a given column based on custom style-selection logic with the following properties:

  • CellContentStyleSelector(IStyleSelector)—Styles the content of the cell by using the text alignment options (TextMargin, HorizontalTextAlignment, VerticalTextAlignment), the font options (FontAttributes, FontFamily, FontSize) and the TextColor property.
  • CellDecorationStyleSelector(IStyleSelector)—Styles the decoration of a cell.

For the DataGrid Style Selector example, go to the SDKBrowser Demo Application and navigate to the DataGrid > Styling category.

Row Background Style Selector

You can set a different style on a row, an alternate row, and on row details based on custom style-selection logic by using the RowBackgroundStyleSelector (IStyleSelector) property. To apply a RowBackgroundStyleSelector you have to: 1. Create a custom class that inherits from IStyleSelector. 1. Implement the SelectStyle method.

The object item of the SelectStyle method is of type DataGridRowInfo. The DataGridRowInfo represents a class that provides information for each row in DataGrid and exposes the follwoing properties:

  • Item (object)—Gets the business object associated with the row.
  • IsRowDetails (bool)—Gets a value that specifies whether the row is RowDetail.
  • IsAlternate (bool)—Gets a value that specifies whether the row is an alternate one.

For the DataGrid Row Background Style Selector example, go to the SDKBrowser Demo Application and navigate to the DataGrid > Styling category.

Group Style Selector

You can set a different style on a group header and footer based on custom style-selection logic with the following properties:

  • GroupHeaderStyleSelector(IStyleSelector)—Specifies different style per-group header once the DataGrid control is grouped.
  • GroupFooterStyleSelector(IStyleSelector)—Specifies different style per-group footer once the DataGrid control is grouped.

To display the group footer, set the ShowGroupFooters property to True.

For the DataGrid Style Selector example, go to the SDKBrowser Demo Application and navigate to the DataGrid > Styling category.

The CellContentStyleSelector, CellDecorationStyleSelector, RowBackgroundStyleSelector, GroupHeaderStyleSelectorand, and GroupFooterStyleSelector use the SelectStyle method to change the style.

Example with Cell and Group Style Selectors

The following example demonstrates how to apply the style selectors on the DataGrid cell and group header. You will add the DataGrid and set the CellContentStyleSelector property as a static resource of type MyCellContentStyleSelector, CellDecorationStyleSelector as a static resource of type MyCellDecorationStyleSelector, and GroupStyleSelector as a static resource of type MyGroupStyleSelector:

1. Define the RadDataGrid in XAML:

<telerik:RadDataGrid x:Name="datagrid"
                     AutoGenerateColumns="False"
                     GroupHeaderStyleSelector="{StaticResource MyGroupSelector}"
                     UserEditMode="Cell">
    <telerik:RadDataGrid.Columns>
        <telerik:DataGridTextColumn PropertyName="Country" />
        <telerik:DataGridTextColumn PropertyName="Capital"
                                    CellContentStyleSelector="{StaticResource MyCellContentStyleSelector}"
                                    CellDecorationStyleSelector="{StaticResource MyCellDecorationSelector}">
        </telerik:DataGridTextColumn>
    </telerik:RadDataGrid.Columns>
</telerik:RadDataGrid>

2. Create a sample data model:

public class Data
{
    public Data(string country, string capital)
    {
        this.Country = country;
        this.Capital = capital;
    }
    public string Country { get; set; }
    public string Capital { get; set; }
}

3. Set the ItemsSource of the RadDataGrid:

var source = new ObservableCollection<Data>();
source.Add(new Data("India", "New Delhi"));
source.Add(new Data("South Africa", "Cape Town"));
source.Add(new Data("Nigeria", "Abuja"));
source.Add(new Data("Singapore", "Singapore"));
source.Add(new Data("Romania", "Bucharest"));
source.Add(new Data("Spain", "Madrid"));
source.Add(new Data("France", "Paris"));
source.Add(new Data("Japan", "Tokyo"));

this.datagrid.ItemsSource = source;

4. Create a custom class for each selector. Each class derives from IStyleSelector and overrides its SelectStyle method.

  • The implementation of MyCellContentSelector class:
class MyCellContentSelector : IStyleSelector
{
    public Style CellTemplate1 { get; set; }
    public Style CellTemplate2 { get; set; }

    public Style SelectStyle(object item, BindableObject container)
    {
        DataGridCellInfo cellInfo = item as DataGridCellInfo;
        if (cellInfo != null)
        {
            if ((cellInfo.Item as Data).Capital == "Singapore")
            {
                return CellTemplate1;
            }
            else
            {
                return CellTemplate2;
            }
        }

        return null;
    }
}
  • The implementation of MyCellDecorationSelector class:
class MyCellDecorationSelector : IStyleSelector
{
    public Style CellTemplate1 { get; set; }
    public Style CellTemplate2 { get; set; }

    public Style SelectStyle(object item, BindableObject container)
    {
        DataGridCellInfo cellInfo = item as DataGridCellInfo;
        if (cellInfo != null)
        {
            if ((cellInfo.Item as Data).Capital == "Singapore")
            {
                return CellTemplate1;
            }
            else
            {
                return CellTemplate2;
            }
        }

        return null;
    }
}
  • The implementation of MyGroupSelector class:
class MyGroupSelector : IStyleSelector
{
    public Style CountryTemplate1 { get; set; }
    public Style CountryTemplate2 { get; set; }

    public Style SelectStyle(object item, BindableObject container)
    {
        GroupHeaderContext header = item as GroupHeaderContext;
        if (header != null)
        { 
            if (header.Group.Key == "India")
            {
                return CountryTemplate1;
            }
            else
            {
                return CountryTemplate2;
            }
        }
        return null;
    }
}

5. Add MyCellContentSelector, MyCellDecorationSelector, and MyGroupSelector as resources in the Resource page of the application:

<local:MyGroupSelector x:Key="MyGroupSelector">
    <local:MyGroupSelector.CountryTemplate1>
        <Style TargetType="telerik:DataGridGroupHeaderAppearance">
            <Setter Property="BackgroundColor" Value="#DACFED" />
        </Style>
    </local:MyGroupSelector.CountryTemplate1>
    <local:MyGroupSelector.CountryTemplate2>
        <Style TargetType="telerik:DataGridGroupHeaderAppearance">
            <Setter Property="BackgroundColor" Value="#B2D6D2" />
        </Style>
    </local:MyGroupSelector.CountryTemplate2>
</local:MyGroupSelector>
<local:MyCellContentSelector x:Key="MyCellContentStyleSelector">
    <local:MyCellContentSelector.CellTemplate1>
        <Style TargetType="telerik:DataGridTextCellAppearance">
            <Setter Property="TextColor" Value="#00796B" />
        </Style>
    </local:MyCellContentSelector.CellTemplate1>
    <local:MyCellContentSelector.CellTemplate2>
        <Style TargetType="telerik:DataGridTextCellAppearance">
            <Setter Property="TextColor" Value="#6B41B1" />
        </Style>
    </local:MyCellContentSelector.CellTemplate2>
</local:MyCellContentSelector>
<local:MyCellDecorationSelector x:Key="MyCellDecorationSelector">
    <local:MyCellDecorationSelector.CellTemplate1>
        <Style TargetType="telerik:DataGridCellDecorationAppearance">
            <Setter Property="BackgroundColor" Value="#1A00796B" />
        </Style>
    </local:MyCellDecorationSelector.CellTemplate1>
    <local:MyCellDecorationSelector.CellTemplate2>
        <Style TargetType="telerik:DataGridCellDecorationAppearance">
            <Setter Property="BackgroundColor" Value="#1A8660C5" />
        </Style>
    </local:MyCellDecorationSelector.CellTemplate2>
</local:MyCellDecorationSelector>

This is how the DataGrid control will look when CellContentStyleSelector is applied.

.NET MAUI DataGrid Cell and Group Header Style Selectors

For the DataGrid Style Selector example, go to the SDKBrowser Demo Application and navigate to the DataGrid > Styling category.

Example with Row Background Style Selectors

The following example demonstrates how to apply the style selectors on the DataGrid rows, row details, and alternate rows. You will add the DataGrid and set the RowBackgroundStyleSelector property as a static resource of type MyRowBackgroundStyleSelector:

1. 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>

2. Create a sample data model:

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

    public int Age { get; set; }

    public string City { get; set; }
}

3. 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; } 
}

4. Create a custom class MyRowBackgroundStyleSelector that derives from IStyleSelector and override 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)
            {
                if (rowInfo.IsAlternate)
                {
                    return this.AlternateRowDetailsBackgroundStyle;
                }
                else
                {
                    return this.RowDetailsBackgroundStyle;
                }
            }
            else
            {
                if (rowInfo.IsAlternate)
                {
                    return this.AlternateRowBackgroundStyle;
                }
                else
                {
                    return this.RowBackgroundStyle;
                }
            }
        }

        return null;
    }
}

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

This is how the DataGrid control looks when applying the RowBackgroundStyleSelector.

.NET MAUI DataGrid Row Background Style Selector

For the DataGrid Row Background Style Selector example, go to the SDKBrowser Demo Application and navigate to the DataGrid > Styling category.

See Also

In this article
Related articles
Not finding the help you need? Improve this article