Get SelectedItems From DataGrid Using MVVM In Silverlight

In this post what I want to learn and to share something like how to get the selected items from the data grid control of the Silver light using MVVM. You can see the main output of the example code in the Image 1, here you can see that I have a data grid control and three button with label Add, edit and delete records. Let me explain you what is happening in the example code, user is allowed to select multiple record from the grid and the selected records Ids are displayed in the "Selected Ids" area. If user select only one record then add and edit buttons are enabled and if records are more then one then add and edit buttons are disabled. Similarly If number of selected item count is shown in the delete button text.

Image 1

Let us start with the detail of the View Model and the View so that you can have clear understanding of what is happening in the example code.
View Model :

               First I will discuss the important area of the view model,  Here you can see that OnSelectionChanged command takes the object type parameter which is first converted to the IList type in the first statement. Then in the next statement I have set empty string to the SelectedItemIds property which is of type string to display the SelectedItems Ids only below the buttons in the View. In the next statement I have place foreach loop too loop through the selected item of the Data Grid. As the Item Source of the data grid items are of type Customer type. So I have used same type in the foreach loop and then add the ids in the SelectedItemIds and place comma (,) sign between the ids if user has selected more then one item.

List 1

After assigning the selected items ids what I want to do is to enable/disable the add and edit buttons and also to show the number of selected record count in the delete record button text. Here you can see that I have simple if condition to check the number of selected records. If number of selected records are more then 1 then I have set the DeleteText property which is bind to the content property of the delete button in the view and also append the number of selected item count and set ButtonEnabled (which is bind to the IsEnabled property of the add and edit buttons in the view.) property which is of type Boolean to false as I want to disable the add and edit buttons in the view.

View :

           I have simple view which consist of three button controls and one TextBlock control and one datagrid control. I have listed the Home page grid layout in the List 2. Here you can see that add and edit button IsEnabled property is bind to the ButtonEnabled and the Content property of the delete button is bind to the DeleteText property. Next is the TextBlock control which is used to show the comma separated selected items id if more then one records are selected by user. Here you can see that I have used run tag to shown the static text and also the bind text (which is bind to the SelectedItemIds property) as you can see in the List 2.

List 2

To get the selected item list of the data grid control I have to fire the SelectionChanged event of the data grid control for this I have include the reference of the System.Windows.Interactivity name space in the xaml file which is alias with i. The code to bind the SelectionChanged event handler of the data grid is shown in the Image 2 and also listed int he List 2. Here you can see that I have passed the SelectedItems list of the data grid to the command parameter as you can see in the Image 2.

Image 2

By binding the SelectionChanged command and passing the SelectedItems of the data grid I have get the selected Items in the View Model. Hope you get idea of how to get the selected items back to the view model.You can download the source code from here. 

All and any comments / bugs / suggestions are welcomed!