Sunday, October 9, 2011

Remove Datagrid Default Row Selection Using PagedCollectionView

Problem :
             If you have used Datagrid control then you know by default first Row of the Datagrid control is selected and if you have used the RowDetailTemplate then the RowDetailTemplate of the selected row (which is in this case is the first row) is expanded.So here we will remove the default row selection of the data grid control by using the PagedCollectionView.
Solution :
               For this example we will used the PagedCollectionView type as the item source for the data grid control and will remove the remove the first selected row which you can see in the Image 1. And I have used the MVVM pattern for this example mean I have viewModel for the home page with the name HomeViewModel.As you can see in the Image 1 when application first run and the page is loaded and the item source is assigned to the datagrid the first row is selected. Sometime default selection of the first row is fine but sometimes it is not fine as it depends on the client requirement. If client don't wants the first row to be selected then you have to implement some sort of logic so that first row of the data grid will not selected when user open the page for the first time.

Image 1
Solution to the above problem is very simple and you can see the code in the List 1. Here you can see that I have created the PagedCollectionView and assigned it to the property CustomerList which is of type PagedCollectionView. After the assignment of the CustomerList property I have used the MoveCurrentTo function which will sets the specified item to be the CurrentItem in the view.If the specified item is not found, the method returns false and the CurrentItem is positioned before the start of the collection in the view.  As you can see that I have set passed null to the MoveCurrentTo function which will return false and selection will be cleared.
List 1

Result of the List 1 can be seen in the Image 2. Here you can see that now selection of the first row is cleared and RowDetailTemplate of first row is also collapsed.
Image 2
In Image 3 and Image 4 you can see the CurrentItem and CurrentPosition of the CustomerList. Here you can see in the Image 3 that the CurrentItem and CurrentPosition properties are assigned values, mean here you can see CurrentItem has the value of type Customer which is the class I have used to populate the CustomerList of PagedCollectionView type and the CurrentPosition have 0 value mean first row is selected.
Image 3
But after calling the MoveCurrentTo for the null value the values for the CurrentItem is null and CurrentPosition is -1 mean no row is selected now for the PagedCollectionView. The CurrentItem and the CurrentPosition properties are the read only properties mean you can't set value for these properties you can get value of the CurrentItem and CurrentPosition properties.
Image 4
I have used MoveCurrentTo function of the PagedCollectionView, if you have used other function or technique which is better then this then please do let me know about it by sharing your technique or logic here will help not only me but also other who come to this post if they have similar sort of problem or requirement. You can download the source code from here.

All and any comments / bugs / suggestions are welcomed!

No comments: