Friday, September 16, 2011

SelectedItems Using PagedCollectionView Using PropertyChanged

In my post "Get SelectedItems From DataGrid Using MVVM In Silverlight " I have used command and triggers to get the selected items of the datagrid control. Here we will get the selected item of the data grid control without using the command and trigger. Here we will use the PagedCollectionView to get the selected items. So that we can remove the use of the command and the triggers which we have used in the "Get SelectedItems From DataGrid Using MVVM In Silverlight" post and we will take advantage of INotifyPropertyChanged interface.

Solution :
           The solution is very simple as we don't want to use the command and the triggers but we want to achieve this on the property changed which you can achieve by implementing the INotifyPropertyChanged interface. The main page which we are using for this example is shown in the Image 1, here you can see that I have two similar data grid controls on the left side the source data grid control which is populated when the page is loaded and on the right side is the destination data grid control which will display the selected items from the source data grid control.

Image 1

First I would like to discuss the Persons class which I have used for this example which is listed in the List 1. Here you can see that I have inherit the Persons class from the INotifyPropertyChanged interface and also implemented the INotifyPropertyChanged event handler which you can see at the end of the class.I have First name, Last name, city , country and Is selected properties in the class. You can see that I have only raise the PropertyChanged event from the Is selected property as this proper is of type Boolean and I will perform selected of the record based on the true/ false value of IsSelected property. If IsSelected property has value true then record is selected else record is not selected.
List 1

Note: In List 1 I have only shown relevant which I wan to discuss here, function which return sample records has been removed but you can find the function on the sample application which you can download from the link which is provided at the end of the post
In the List 2 you can see the viewModel for the Home page which is used as the data context for the home view.Here you can see that I used two properties one is PersonList which is of type PagedCollectionView and used for the first gird which is place on the left side of the interface and which will be the source datagrid from where you can select record by clicking the check box control which is displayed in the first column of the data grid control.
List 2

Second property which is ObservableCollection type will hold the records for the second datagrid control which is shown on right side and act as destination and will only show records which are selected from the source datagrid and you can only view records in the destination data grid as the check box control property isEnabled is false and IsReady only property of the datagrid is also false. In the constructor I have initialized the PersonList which is of PagedCollectionView type by call the Persons GetPersonRecord function which is the static function and will return List of Persons( which you can find in the Persons class in the downloaded example code). In the next statement I have use foreach loop to attached the PropertyChanged event of the record as I have used the INotifyPropertyChanged interface in the Persons class So  I can now I have PropertyChanged Event for each record.
When you click any of the check box control in the source data grid the PropertyChanged event which is attached with every record and IsSelected property in the Persons class has raise the PropertyChanged event when the value is changed. In Image 2 you can see the sender and the arguments of the events here you can see that in the sender it will show you the whole record and in the arguments it will send the property name which is changed.In the argument 'e' there is name PropertyName which hold the name of the property here you can see that it has "IsSelected" as I have raised the event from IsSelected property.
Image 2

In the PropertyChanged event I have cost the sender to the respective type in this case my class name is "Persons"  so I have created object of type Persons and save the sender in that object. Then in the next statement I have check for the IsSelected value if the value is true then I have added the sender to the SelectedList property which is used to bind to the destination datagrid to show the selected item.

Image 3

When you select records from the source data grid then you can see the selected item in the destination datagrid. For tested purpose I have selected random 3 items from the source data grid and the selected items are shown in the destination data grid as shown in the Image 3 above. If you unchecked the any of the selected record then that record will be removed from the destination datagrid.You can download the source code from here and also test yourself.

Note: In the Persons class you have seen that I have only raised the PropertyChanged event from the IsSelected property because I want to do procession on the basis of the IsSelected property value. If you changed any of the property like First name, Last Name, Country and city then PropertyChanged event will not fires as these properties didn't raise PropertyChanged event in the setter.


All and any comments / bugs / suggestions are welcomed!

No comments: