Conditionally highlighting rows in Silverlight RAD grid using MVVM approach

In today's post we will discuss how to conditionally highlight rows in Telerik Rad-Grid for Silverlight.

The Telerik RadGrid is a control equivalent to the traditional ‘Gridview’ in vanilla Silverlight. The implementation for the requirement is very easy in traditional code behind using the available events and objects of Telerik RadGrid for Silverlight.  The approach is slightly different in MVVM approach. This post details how to implement this requirement from within the realm of MVVM pattern.

Approach

• Conditionally highlighting of rows in Telerik Rad-Grid can be achieved by creating custom cell style selector. 
• This is done by creating a class for custom cell style selector which derives from Telerik.Windows.Controls.StyleSelector. 
• This class will have the logic for choosing the cell style based on business logic. 
• This custom created style can then be used in XAML as a ‘Static resource’. 
• When rad-grid row is loaded, the code written in cell style selector class is executed and appropriate style is applied to the row.
• This approach helps in achieving the functionality without writing code in code-behind class.

Implementation

Step 1 - Creating class for cell style selector

Step 1.1 - Create a class which inherits from Telerik.Windows.Controls.StyleSelector. Let’s name this class as ‘RadGridCellStyleSelector’. So declaration of class will be as follows – 

namespace MyProject.RadGridCustomStyles

{

    public class RadGridCellStyleSelector : StyleSelector

    {

   

    }

}

Step 1.2 - Add two auto implemented properties of type ‘System.Windows.Style’ which will define the style of rows in normal and highlighted modes.

/// <summary>

/// Gets or sets style to apply on the cells in the highlighted row.

/// </summary>

public Style HighlightedCellStyle { get; set; }

/// <summary>

/// Gets or sets style to apply on the cells in the normal non-highlighted row.

/// </summary>

public Style NormalCellStyle { get; set; }

Step 1.3 - Override the ‘SelectStyle’ method of ‘StyleSelector’ class from which ‘RadGridCellStyleSelector’ class has been derived.

/// <summary>

/// Selects the style to apply to the given row.

/// </summary>

/// <param name="item">The row that the cell belongs to.</param>

/// <param name="container">The parameter is not used.</param>

/// <returns>The style to apply to the cell.</returns>

public override Style SelectStyle(object item, DependencyObject container)

{

    //Get the data for row which will be bound

    var row = item as RowDataModel;

    if (row == null)

    {

        return null;

    }

    return row.Status == "True" ? HighlightedCellStyle : NormalCellStyle;

}

• Here, ‘item’ will give the data for the row which will be bound to the grid. In sample code, this is of type ‘RowDataModel’. 
• This can be retrieved and then condition is checked for the required property (Status). 
• Based on value of the property, the required cell style is chosen and returned. 
• The highlighted logic can be customized according to actual requirement.

Step 2 - Using custom cell style selectors in XAML

Step 2.1 - Declare the namespace in which custom cell style selector class has been declared. In this case, it is ‘MyProject.RadGridCustomStyles’.

<UserControl x:Class="MyProject"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"

    mc:Ignorable="d"

    xmlns:custom="clr-namespace:MyProject.RadGridCustomStyles"

           d:DesignHeight="300" d:DesignWidth="1000">

Step 2.2 - Now we define the rad grid cell style as a resource 

<UserControl.Resources> 

    <ResourceDictionary>

       <custom:RadGridCellStyleSelector x:Key="MyRadGridCellStyleSelector"

            NormalCellStyle="{StaticResource GridViewNormalCellStyle}"

            HighlightedCellStyle="{StaticResource GridViewHighlightedCellStyle}"/>

    </ResourceDictionary>

</UserControl.Resources>

Here – 

• RadGridCellStyleSelector – is name of the class
• NormalCellStyle – Property of the class of type Style
• HighlightedCellStyle – Property of the class of type Style

Step 2.3 - The styles ‘GridViewNormalCellStyle’ and ‘GridViewHighlightedCellStyle’ are the actual styles that will be defined for XAML in style sheet

<Style x:Key="GridViewNormalCellStyle" TargetType="telerik:GridViewCell">

    <Setter Property="Background" Value="White" />

    <Setter Property="VerticalContentAlignment" Value="Top"/>

    <Setter Property="HorizontalContentAlignment" Value="Left"/>       

</Style>

<Style x:Key="GridViewHighlightedCellStyle" TargetType="telerik:GridViewCell">

    <Setter Property="Background" Value="Yellow" />

    <Setter Property="VerticalContentAlignment" Value="Top"/>

    <Setter Property="HorizontalContentAlignment" Value="Left"/>

</Style>

Here the styles can be customized according to need. In this example, for the highlighted cells, the background colour has been changed from normal white colour to ‘Yellow’

Step 2.4 - In telerik rad grid column, specify the CellStyleSelector as ‘RadGridCellStyleSelector’.

<telerik:GridViewDataColumn Width="150" HeaderTextAlignment="Center"                                          CellStyleSelector="{StaticResource RadGridCellStyleSelector}" TextAlignment="Left"                                           />

Advantages

• The advantage of using this approach is that you are able to stick to MVVM pattern with no code-behind involved. 
• The logic is cleanly separated in a class while the actual styles are still present in your style-sheet.
• The business logic and styles have clean separation leading to easier maintenance.