Selecting multiple checkboxes in Silverlight Telerik RAD grid using MVVM approach

In today's post, we will discuss about selecting multiple rows in a Telerik Rad-Grid and then performing action on selected rows. This needs to be achieved using MVVM approach as project follows MVVM pattern.

To handle multiple selections of rows in rad-grid using MVVM pattern, ‘Silverlight behaviors’ can be used. The main use of ‘Silverlight Behaviors’ is to provide additional functionalities and extensibility to controls without writing code in the code-behind. This helps in sticking to MVVM pattern more religiously.

The advantage of using this approach is that you are able to stick to MVVM pattern with no code-behind involved.

Step 1 - Creating class for implementing behavior

Step 1.1 - Create a class which inherits from System.Windows.Interactivity.Behavior. Let’s name this class as ‘RadGridMultipleSelectBehavior’.

So declaration of class will be as follows –

namespace MyProject.CustomRadGridBehaviors

{

public class RadGridMultipleSelectBehavior : Behavior<RadGridView>

{

}

}

Here ‘RadGridView’ is the associated dependency object for which the behavior is to be implemented. In this class, various properties and events of ‘RadGridView’ can be easily accessed as in code-behind. But since this code is not written in code-behind we are de-coupled from code-behind model.

Step 1.2 - Declare a dependency property which will store the selected items in the rad-grid. This dependency property then needs to be registered with rad-grid. This will link the property with the rad-grid.

public static readonly DependencyProperty SelectedItemsProperty =

DependencyProperty.Register("SelectedItems",

typeof(INotifyCollectionChanged),

typeof (RadGridMultipleSelectBehavior),

null);

Step 1.3 - Declare a property of type RadGridView. In the get accessor of the property, return associated rad-grid as ‘AssociatedObject’. This is an inbuilt property of the behavior object.

        private RadGridView Grid

        {

            get { return AssociatedObject; }

        }

Step 1.4 - Override ‘OnAttached’ method of ‘Behavior’ class. This will help to specify the actions that should be performed when this behavior is attached to the rad-grid. In this method, wire-up an event handler to the rad-grid selected items collection changed property. 

        protected override void OnAttached()

        {

            base.OnAttached();

            Grid.SelectedItems.CollectionChanged += SelectedItemsCollectionChanged;

        }

CollectionChanged event is fired in following scenarios – 

• Item is added to the collection (Row is selected in rad-grid)
• Item is removed from the collection (Row is unselected in rad-grid)
• Collection itself changes completely (Page change in rad-grid)

Step 1.5 - Once event handler is wired with event, implement the event handler. All of these conditions are handled in SelectedItemsCollectionChanged event handler as follows 

Here, when item is removed from collection or collection changes completely, e.OldItems will not be null. It will have all the items that were previously selected but now unselected. So these items can be removed from ‘SelectedItems’. 

When item is added to collection, e.NewItems will not be null. Hence newly selected items will be added to the ‘SelectedItems’ collection. If the items are being added for the first time, the ‘SelectedItems’ collection will be created. 

Step 2 - Using the behavior class in XAML as behavior

Once this class is created, it can be used in XAML as rad-grid behavior.

Step 2.1 - First add namespace for Microsoft interactivity and our rad grid behavior class as highlighted below – 

<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:i="http://schemas.microsoft.com/expression/2010/interactivity"   

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

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

Step 2.2 - Once this is done, behavior class can be easily used in rad-grid as follows – 

<telerik:RadGridView Name="MyRadGridView">

   <i:Interaction.Behaviors>

      <custom:RadGridMultipleSelectBehavior

          SelectedItems="{Binding Path=SelectedItems,Mode=TwoWay}"/>               

   </i:Interaction.Behaviors>           

</telerik:RadGridView>

Step 2.3 - Now declare the ‘SelectedItems’ property in view model as follows – 

public ObservableCollection<object> SelectedItems { set; get; }

Step 2.4 - This property will now be updated from view whenever any row is selected or unselected in the rad-grid. This property can then be used in your view model logic as required.