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!