In this post I will show you how you can bind the RowDetailTemplate of the data grid using the MVVM pattern. Below are the image of the sample code here you can see the default page in Image 1 and when user click on any of the record then detail of the record is shown in the RowDetailTemplate which also consist of the data grid control which you can see in the Image 2.
Here in the Image 2 you can see the RowDetailTemplate of the selected record. Here you can see the user id , programming language and the Expert Level ( Column names which are displayed in the inner data grid control).
Let us start with the sample code. I will explain model first , then the view model and at the end the view.
In the model I have two classes one is the Persons and second is the PersonDetail. The Persons class consist of the user id, first name, last name, email id , contact number and date of birth properties. The Persons class will be used to show records in the main data grid, which you can say the outer grid. The Persons class has only one function which is GetPersonRecord which is used to return the list of Persons records and the function is static so just call the GetPersonRecord function by using the class name.The PersonDetail class consist of three properties which are user id, programming language and the Expert Level. The PersonDetail class will be used to show records in the RowDetailTemplate ( Which consist of one data grid control to show the Person expertise in programming language). The PersonDetail also have one static function which will return list of PersonDetail records.
2- View Model :
The view model only consist of one class MainWindowViewModel. This class will be used to bind with the MainWidnow view. The MainWidnowViewModel is inherit from the INotifyPropertyChanged interface.Theinterface is used to notify clients, typically binding clients, that a property value has changed. The ChangedProperty event of
The last and the important property in the view model is the SelectedPersonDetail property, which is used to bind with the RowDetailTemplate property. As the SelectedPersonDetail property will changed every time user click on the row in the outer/main data grid control so RaisePropertyChanged event will be fired every time the value of the SelectedPersonDetail property will changed.
3- View :
The view is very simple one here the outer/main data grid Item source and SelectedItem properties are set. The imported property which is used to bind the Item source of the RowDetailTemplate data grid is listed below, I have only write the xaml of the Item source of the data grid control.
In the above xaml code you can see that I have used RelativeSource to bind the Item source of the RowDetailTemplate data grid control. The RelativeSource property is used to specify as a source an object that is positioned relatively to the current object. Once again, this property is used when there is a need to specify a source other than the DataContext of the object.FindAncestor mode allows the retrieval of an ancestor of the current object based on its type. I have specify type to be window as I want to bind the DataContext property SelectedPersonDetail which will be the filtered records of the selected persons records.You can download the source code from here.
All and any comments / bugs / suggestions are welcomed!