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!

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!

How To Add xap To ClientBin Folder

In this short post I will show you how to add the xap file in ClientBin folder when you add silverlight project to existing web project. Right click on the web project and click on the properties option from the menu. After clicking on the properties window click on the "Silverlight Application" option you will see window as shown in Image 1.

Image 1

Click the add button you will see the window as shown in the Image 2. From here you can see the silverlight project options in the comboBox as shown in the Image 2. you can select any project you want to include in the web application.

Image 2

Hope you get idea of how to include the xap file in the web application when you add the silverlight application to your existing web applications.

All and any comments / bugs / suggestions are welcomed!

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!