CommandBinding in Wpf C1DataGrid

While developing applications in Wpf, sometimes we follow the MVVM pattern and come across the requirement to bind commands. We'll discuss the same in this blog. And for demo purpose, I've implemented command binding in Wpf C1DataGrid. Our motive is to enable row selection using MVVM. Let's create a new Wpf project "CommandBinding" and add three folders - View, Model and ViewModel - to it. Then add a new class called “Employee” under the "Model" folder. This is our domain entity and contains a few properties.

namespace CommandBinding.Model  
{  
 class Employee  
 {  
  public string FirstName { get; set; }  
  public string LastName { get; set; }  
  public int Age { get; set; }  
 }  
}  

Add a class for ICommand Implementation called “DelegateCommand", to the folder "ViewModel".

namespace CommandBinding.ViewModel  
{  
 class DelegateCommand : ICommand  
 {  
  private Action m_action;  
  public DelegateCommand(Action action)  
  {  
   this.m_action = action;  
  }  
  public bool CanExecute(object parameter)  
  {  
   return true;  
  }  
  public void Execute(object parameter)  
  {  
   m_action();  
  }  
  public event EventHandler CanExecuteChanged;  
  public void OnCanExecuteChanged()  
  {  
   CanExecuteChanged(this, EventArgs.Empty);  
  }  
 }  
}  

Add another class "EmployeeListView" to the folder "ViewModel". This is responsible for handling commands that get triggered in the view; and also, for sending data to the view.

namespace CommandBinding.ViewModel  
{  
 class EmployeeListView  
 {  
  private ICommand m_RowClickCommand;  
  public EmployeeListView()  
  {  
   m_RowClickCommand = new DelegateCommand(() =>  
   {  
    var set = this.SelectedData;  
     if (set != null)  
     {  
      MessageBox.Show(set.FirstName,"First Name");  
     }  
    });  
   }  
   public Employee SelectedData { get; set; }  
   public ICommand RowClickCommand  
   {  
    get  
    {  
     return m_RowClickCommand;  
    }  
   }  
   public IList EmployeeList  
   {  
    get  
    {  
     List _list = new List();  
     _list.Add(new Employee() { FirstName = "John", LastName = "Wayne", Age = 35 });  
     _list.Add(new Employee() { FirstName = "Maximus", LastName = "Decimus", Age = 33 });  
     _list.Add(new Employee() { FirstName = "Alexander", LastName = "Conklin", Age = 42 });  
     _list.Add(new Employee() { FirstName = "Jason", LastName = "Bourne", Age = 66 });  
     return _list;  
    }  
   }  
  }  
}  

Now, drag MainWindow.xaml to folder "View". Once done, open App.xaml and change "StartupUri" tag from "MainWindow.xaml" to "View/MainWindow.xaml". Take a look at the XAML markup for MainWindow.xaml where we place C1DataGrid, add columns, set bindings and add "MouseLeftButtonUp" event trigger using Interactivity.

<Grid>  
  <Grid.DataContext>  
   <ViewModel:EmployeeListView />  
  </Grid.DataContext>  
 <c1:C1DataGrid Name="c1DataGrid1" AutoGenerateColumns="False" ItemsSource="{Binding EmployeeList}"  
                SelectedItem="{Binding SelectedData, Mode=TwoWay}" CanUserAddRows="False">  
   <i:Interaction.Triggers>  
    <i:EventTrigger EventName="MouseLeftButtonUp">  
     <i:InvokeCommandAction  
                        Command="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=c1:C1DataGrid},  
                        Path=DataContext.RowClickCommand}" />  
    </i:EventTrigger>  
   </i:Interaction.Triggers>  
   <c1:C1DataGrid.Columns>  
    <c1:DataGridTextColumn Header="First Name" Binding="{Binding FirstName}" Width="100"/>  
    <c1:DataGridTextColumn Header="Last Name" Binding="{Binding LastName}" Width="100"/>  
    <c1:DataGridNumericColumn Header="Age" Binding="{Binding Age}" Width="100"/>  
   </c1:C1DataGrid.Columns>  
  </c1:C1DataGrid>  
 </Grid>  

And this is it :) Now, when you click on any row, the row gets selected with a message box that displays the value of a field from the selected DataItem. Download C# Sample Download Vb.Net Sample