Available for: Windows 8.1 | Windows Phone 8.1

Use the CellDecorationStyleSelector Property

This example demonstrates how to use CellDecorationStyleSelector property to set custom background to the grid cells depending on a property from the model.

To style the text in the grid cells, you have to use the CellContentStyleSelector property.

Cell Decoration Style Selector


First lets create a simple class that represents our data:

public enum Gender

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

    public Gender Gender { get; set; }

And a ViewModel class that will be used as DataContext of the grid:

public class ViewModel
    public ObservableCollection<Person> Data { get; set; }

    public ViewModel()
        Data = new ObservableCollection<Person>()
            new Person() { Name = "Anna", Gender = Gender.Female },
            new Person() { Name = "Tom", Gender = Gender.Male },
            new Person() { Name = "Jack", Gender = Gender.Male },
            new Person() { Name = "Emmy", Gender = Gender.Female }

Now we have to implement a class that inerits the StyleSelector class and override its StyleSelectorCore method in order to provide custom logic for cell Columns\HowTo. In this example it will provide different styles depending on whether the data item's Gender is Male or Female.

public class CellStyleSelector : StyleSelector
    public Style MaleStyle { get; set; }

    public Style FemaleStyle { get; set; }

    protected override Style SelectStyleCore(object item, DependencyObject container)
        var cell = (item as DataGridCellInfo);
        var person = cell.Item as Person;

        if (person.Gender == Gender.Female)
            return this.FemaleStyle;

        return this.MaleStyle;

Let's add an instance of the CellStyleSelector class to the page resources that will be used by the CellDecorationStyleSelector property of the grid and set its style properties.

We have to set the Style properties with TargetType="Rectangle".

<local:CellStyleSelector x:Key="BackgroundSelector">
        <Style TargetType="Rectangle">
            <Setter Property="Fill" Value="RoyalBlue"/>
        <Style TargetType="Rectangle">
            <Setter Property="Fill" Value="HotPink"/>

Finally we are ready to define our grid and set the CellDecorationStyleSelector property of its columns:

<telerik:RadDataGrid ItemsSource="{Binding Data}" AutoGenerateColumns="False" Width="300" Height="300">
        <telerik:DataGridTextColumn PropertyName="Name" CellDecorationStyleSelector="{StaticResource BackgroundSelector}" />
        <telerik:DataGridTextColumn PropertyName="Gender" CellDecorationStyleSelector="{StaticResource BackgroundSelector}" />

As we expect: when the item is Female, the background is pink; and when the item is Male, the background is blue.