Sunday, July 17, 2011

Selecting One Checkbox Control In DataGrid Control Using MVVM Using Silverlight

In this post I will show you how to select single check-box control when you have single check-box control in each row of the datagrid control. As you all know that check-box controls are normally used for the multiple selection and radio buttons are used for single selection. But there are sometimes requirement that control should be check-box and selection should be single. Mean if user view data in the datagrid control then he/she should only select one check-box at a time not more then one. Main page is shown in the Image 1. Here you can see that I have placed check-box control in the first column of the datagrid control which I have also highlighted.
Image 1

The code for the view is shown in the List 1. Here I have write main xaml code which I will discuss here rest of the code can be seen in the Home.xaml which is located in the view folder of the project. Here you can see at the top I have mention three name space reference view-model with the alias view-model and Interactivity with the alias i (which is used to trigger events and bind events with the command , for how to bind the command with the event you can see my previous post.). After that you can see the code for the datagrid control and within the datagrid control you can see the columns tag inside datagrid control. In first column I have used the DataGridTemplateColumn so that I can place check-box control.

List 1

In the DataGridTemplateColumn you can see that I have added check-box control and here you can see that I have check-box trigger and in the event-trigger I have set name as click event mean when ever check-box control is chick I want to do some processing on the collection which is bind to the datagrid control. In the command you can see name of the command and also the source for binding for the command. In the command parameter I have passed the primary id of the record which is used to search record in the list.

In List 2 you can see the code for the CheckCommand which we have bind in the check-box click event. Here you can see that I have save the CustomerList List in the temporary List first and then I have used Linq to find the record which has IsSelected property to true and which has not CustomerID equal to the ID passed. Next is I have check if the selectedCustomers has value by using the count. In the if condition I have used the zero index and set the IsSelected property for false as I have only one previous selected item. Next is to assign null to the orginal list which is bind to the item source of the datagrid control and then assigned the temporary list which has only one record as selected.

List 2

Hope you get the idea of how to select single check-box control when each row in the data grid has one column with check-box control.You can download the source code from here

All and any comments / bugs / suggestions are welcomed!


Anonymous said...

wouldn't it be easier just to use a radiobutton control and make sure they all belong to the same GroupName ...?

Asim Sajjad said...

@Anonymous: that is obvoius choice when you need to select one item , mean radio button but there are situation when you have use checkbox control and need to select one checkbox at one time. It was one of question on forum.