Saturday, July 23, 2011

How To Use DataTriggers In Silverlight DataGrid

In this short post I will show you how you can use DataTriggers in datagrid control DataGridTemplateColumn. This was one of the questions when reading one of the forum to change persform some sort of functionality depending on the value of the property. Out of the example code can be seen in the Image 1 here you can see that I have used the DataTrigger for the Subscribed which is nullable Boolean type, mean It hold true , false and null value. Here you can see that I have set verified for true value and also red color and bold font weight, Not varified for the false value and the default value for the textblock is No Information which will handle case for the null value for Subscribed.

Image 1
The xaml code for the data grid control is listed in List 1. Here you can see that I have used DataGridTemplateColumn for the Subscribed column. Then in the CellTemplate I have used DataTemplate and in the DataTemplate I have used stackpanel control and Inside the stackpanel control is my TextBlock control which is used to display value for the Subscribed. Here you can see that after the TextBlock control I have used the triggers. I have used System.Windows.Interactivity dll with alia i which you can see in the namespace area at top. After the Trigger tag I have used the DataTrigger which you can find in the Microsoft.Expression.Interactions dll (I have set alias of ei for the Microsoft.Expression.Interactions dll which is also added in the namespace area at top ).



List 1
I have check for only two values true and false for the IsSubscribed property. In case of true I have set the text Varified, also font weight to bold and font color to red, In case of false I have just set the text property of the textBlock control. In my post you can learn how to change the ChangePropertyAction value using Expression Blend. By using this technique you can also use DataTrigger to disable control , set  visibility of the control etc.You can download the source code from here.

All and any comments / bugs / suggestions are welcomed!

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!