SelectedItem of DataGrid Control

Problem:

             This is very basic question which every beginner has ask many time on the forum "How to get selected Item of the datagrid control". So in this post I will answer this question and some more detail about the selected item of the datagrid control.

Solution :

             For this sample application I have used datagrid control and then two area to display the selected item values which you can see in the Image 1. The purpose of these two area of displaying the selected value is that sometime you need to bind the selected item of the datagrid in xaml and sometime you need to get value in code behind for some database operation.

Image 1

Let us start with our example. First you can see the xaml for the datagrid control here you can see that I have set the AutoGenerateColumns to false so I want to define columns which I want to show. you can see that I have set columns for the First Name, Last Name and Address. I don't want to show CustomerID to the user which is primary key. You can see the xaml of the datagrid control in the List 1.

List 1

Code Behind :

                 First let us start with the code behind, how to get the value of the SelectedItem of the datagrid from code behind?. If you have see the xaml of the datagrid control you have seen that I have attached SelectionChangd event of the datagrid as I want to get the SelectedItem value on the SelectionChanged event of the datagrid you can use whatever suite you like on button click event etc. In List 2 you can see the xaml of the textblock control which are used to show the selected item value from code behind. Here you can see that I have set name of every textblock control which I want to access from code behind.

List 2

Code behind for the SelectionChanged event of the datagrid control is shown in the List 3, here you can see that I have first check the SelectedItem for null it is possible that if you want to get the SelectedItem value when user click some button then it might be possible that user may not select any item from the datagrid control So better to check the SelectedItem for null before you want to use it.

List 3

Then I have cost the SelectedItem of the datagrid to my type which in this case is the Customer type.If you look at the SelectedItem in the watch you can see the data type of the SelectedItem as you can see in the Image 2. Here you can see the data type of the selected item is Customer and you can also see the properties of the selected item.

Image 2

After converting SelectedItem to the Customer type then next is the assignment of the value to the respected textblock control. I have set CustomerId to the customer textblock , First and last name to the First name textblock as I am using one textblock to show the first and last name  and at the end I have assign address to the address textblock. So whenever user select new item on the datagrid control mean selection change then new record will be shown.

Note : Here you can see that I have not bind property CustomerID like the First Name, Last Name and the address property neither I have used the hidden control to bind the CustomerId which we use to do in the asp.net grid where we use label to bind the key property like the CustomerId and set the visibility of the label control to false so that label control is not visible to the user like other controls.But when we get the SelectedItem of the datagrid we also get fields which are not bind to the datagrid columns mean you can say that we can have full row (record) whether we bind some properties or not.

Using XAML Binding :

                          Next is the how to bind the SelectedItem of the datagrid to some control to show the SelectedItem value using binding inside xaml. Xaml code is pasted in List 4 here you can see that I have placed all control e.g textblock control inside grid layout as I want to show the output in tabular format. So I have set the Data Context of the grid layout to the SelectedItem and set the ElementName to the name of the datagrid control.

List 4

After setting the DataContext of the grid layout now see that I have bind textblock control to the properties to the respective controls. Here you can see that I have use single textblock to show the name of the customer. Now when ever datagrid selection is change mean when user select new item then latest values are shown in the xaml end binding control. By using this technique you can also bind the SelectedItem of the datagrid to control inside the xaml. Hope you get idea of how to get the SelectedItem from both code behind as well as from xaml end.You can download the source code from here.

All and any comments / bugs / suggestions are welcomed!

Delete Datagrid Rows

Problem :

               One of the question which was asked on the silverlight forum was how to delete multiple rows of the datagrid when you have provided the checkboxs in the datagrid for the selection of more then one row in the datagrid.

Solution :

            The solution to this problem is very simple and as I have not perform such functionality like that to delete records based on the number of selected records in the datagrid. I do perform such functionality in the asp.net grid but not in the silverlight datagrid. The output can be seen in the Image 1, here you can see that I have button control with content as "Delete" this button is used to remove the selected records and one datagrid control which display the record and each record has the checkbox control which is used for multiple selection to delete.

Image 1

The xaml code for the sample application is shown in the List 1, here you can see that button control is placed inside the stack panel layout which is placed in the first row of the grid layout. Then in the second row is the datagrid control which has number of columns binds to the properties which are displayed to the user here you can see that I have used DataGridTemplateColumn for the first column which is used to have checkbox control so the selection of the row and the checkbox control is bind to the IsSelected property with mode TtwoWay.

List 1

The code behind part which is used to remove the records from the datagrid is shown in the List 2, here you can see that I have selected the records which has the IsSelected property to true from the customerList which is declared at class level and bind to the ItemsSource of the datagrid control in the Loaded event of the page.

List 2

Here in the List 2 you can first I have search for the selected records of the datagrid which user has selected for the delete after selecting the record I have use foreach loop to remove item one by by from my customerList which is bind to the datagrid control and has the original records which ware fetched from the database. I have just simply use the Remove function of the Observable collection if you are using web service then you have to either pass the list of selected records or need to pass the selected items Ids and then on the completed event of your remove/delete web service method you can remove it locally or need to fetch record by calling web service method.You can download the source code from here.

All and any comments / bugs / suggestions are welcomed!

Validating Data During Navigation in DataFrom

Problem:

This might be not problem but I have face this during one of my project when I have used the DataForm control to show the data and when user navigate the data there are some required field which was not filled. It can be happened when one of your client give you their data in some format where they don't have validation of data like required fields etc. So it is important to enter those required field or other validation when you view the records.

Solution:

When I see the problem as I have mention in above problem statement, then I have search for online solution for this problem as while navigating the record user can't see that a field is required if you don't give him/her some sort of indication that a field is required. In the Image 1 you can see that when you will navigate through the records , the second and the third records has invalid entries like the second record don't have Last name field and also the email ID is incorrect but in the Example 01 use will not ask to enter or correct these information and user will go to next records as you can see in the Image 1.

Image 1

For both the example Example 01 and Example 02 I have used same ViewModel and the Customer class which is used for this example is placed in the Classes folder. In the second example you can see that when you reach the second record which don't have Last name field and also the Email ID is not correct message are shown to the user to correct these entries , user will not move forward or backward  until he/she correct the record as shown in the Image 2.

Image 2

The code which is used to validate the record while navigating is shown in the List 1. Here you can see that I have registered CurrentItemChanged event of the data form control and then in the event handler I have just called the ValidateItem function to validate the current item.

List 1

If you have face similar problem like I have face then you can solved it similar to what I have do in code behind just registered event and called the data form function to validate the current time.You can download the source code from here.

All and any comments / bugs / suggestions are welcomed!

Remove Default Empty Column From DataGrid

Problem:

          Need to remove extra default column from the datagrid when you bind datagrid with records. In the Image 1 you can see the extra default column when you bind the data grid control. Sometime it is required to remove that extra empty column.

Image 1

Solution:
             There are two situation when you are binding the datagrid control.

1. AutoGenerateColumns is set to False
2. AutoGenerateColumns is set to True

When you set the AutoGenerateColumns to false then you can set the columns by using either DataGridTextColumn, DataGridCheckBoxColumn or DataGridTemplateColumn, in this case you know the last column of the datagrid and what you have to do is to set the width of last column to (*). When you have AutoGenerateColumns to false, the code is shown in the List 1. here you can see that I have set the width of the last column which is the address column is set to (*).

List 1

You can see the output in Image 2 Here you can see that Address column is stretched and the empty column is removed.

Image 2

When AutoGenerateColumns is True :

                                                     When you have AutoGenerateColumns to true then you don't have any idea how many columns you have in you datagrid control. In my case I have local data which is display so I have set the ItemsSource of the datagrid control in the default constructor and in the loaded event of the page I have write code which is listed in List 2.

List 2

Here you can see that I have first check the number of columns in the datagrid control and then I have set the width of the last column by substructing 1 from the datagrid columns count and set the width of that column to 1 *. The output of this statement is similar to the what you have seen in Image 1. You can download the source code from here.

All and any comments / bugs / suggestions are welcomed!

Setting SelectedValue for ComboBox

Problem:

             When you add combobox items inside xaml then SelectedValue of the Combo Box didn't work.

Solution:

          When I come across this problem I have search alot on net and then I found solution regarding the selectedValue selected in code behind when you have added item of the ComboBox within the xaml. We have used the Items Source property of the combo box and then bind the set the SelectedValue. Now solution for the problem  which I have mentioned is quite simple. For the sample test application I have two combo box one which is set normal and will not work is added first and then the second one which is work when setting the SelectedValue. You can see the layout of the screen in Image 1.

Image 1

The code for both the combo Box are given in the List 1. Here you can see that I have text block control with each of the combo box control. The main point which you have to notice in both the combo box control is that you can see in the second combo Box I have set the DisplayMemberPath and SelectedValuePath of the combo box to Content.

List 1

The code for the Set Value button is shown in the List 2. here you can see that I have set the SelectedValue as string "Male" for both the cboNotworking and cboWorking combo box control but the selected value is shown only for the cboWorking combo box as I have set the DisplayMemberPath and SelectedValuePath to the Content for the cboWorking combo box not for the cboNotWorking combo box.

List 2

I think you can solve the problem when you have similar situation like I have in during my project development.You can download the source code from here.

All and any comments / bugs / suggestions are welcomed!