Setting cell background for autogenerated RADGridView

[Kiran]

I need to set the auto generated radgridview cell background for columns with a certain group ID. The number of columns in each group are dynamic.

If the cell value is less than or equal to 10 i need to set the cell background to a particular color. I may not use code behind for this issue.

[Lance | Senior Manager Technical Support]

Hello Kiran,

You can use a CellStyleSelector for this task. The CellStyleSelector will let you determine a particular background color depending on the model's values. In fact, the example code in our documentation for CellStyleSelector is exactly what you're trying to do.

However, since you're using AutoGenerateColumns=True, you don't have direct access to the column definition in the markup. It's necessary to set the CellStyleSelector on a column.

Therefore you must hook into the GridView's AutoGeneratingColumn event in order to catch when the column is created for the field and then assign the CellStyleSelector.

Here's an example event handler:

private void GridViewDataControl_OnAutoGeneratingColumn(object sender, GridViewAutoGeneratingColumnEventArgs e)
{
    if (e.Column != null && e.Column.Name == "StadiumCapacity")
    {
        e.Column.CellStyleSelector = this.Resources["MyStadiumCapacityStyleSelector"] as StadiumCapacityStyleSelector;
    }
}

MVVM Approach

Since you don't want this to happen in the code behind of the page, you could use an EventToCommand behavior.  The important part here is that you set PassEventArgsToCommand="True"

Here is an example of setting the behavior and the command in the view model:

<telerik:RadGridView ItemsSource="{Binding Clubs}">
            <telerik:EventToCommandBehavior.EventBindings>
                <telerik:EventBinding Command="{Binding GeneratingColumnsCommand}"
                                      EventName="AutoGeneratingColumn"
                                      PassEventArgsToCommand="True" />
            </telerik:EventToCommandBehavior.EventBindings>
        </telerik:RadGridView>

and in the ViewModel, define the command:

public DelegateCommand GeneratingColumnsCommand => generatingColumnsCommand
    ?? (generatingColumnsCommand = new DelegateCommand(OnGeneratingColumns));


private void OnGeneratingColumns(object args)
{
    var e = args as GridViewAutoGeneratingColumnEventArgs;

    if (e?.Column != null && e.Column.UniqueName == "StadiumCapacity")
    {
        e.Column.CellStyleSelector = Application.Current.Resources["MyStadiumCapacityStyleSelector"] as StadiumCapacityStyleSelector;
    }
}

Notice that the same event args that you'd use for a code-behind event handler are available in the command's method.

This also means you have full design-time support, here is a screenshot of the demo app in the designer. The cells are properly colored because of the EventToCommand behavior running the command..

I've attached my demo app for the MVVM approach. In order to run the demo you'll need to restore the Telerik DLLs, you can do this with the Upgrade Wizard or manually fixing the references.

Thank you for contacting Support and for choosing Telerik by Progress.

Regards,
Lance | Tech Support Engineer, Sr.
Telerik by Progress