Sunday, September 11, 2011

Using PagedCollectionView To Group DataGrid Records Using MVVM

Problem :
          When using data grid control sometime we provide grouping of data so that user can see records in groups but the groups are predefine and If you don't want to see the group which we the developer or the client provide then he/she can't change. So here  we can use approach to provide the grouping of data to the end user if he/she want to see the data grid records in groups then he/she can arrange records in groups but if he/she don't want to see the he/she can remove the grouping of records.

Solution :
             Solution for the above problem again is in the use of the PagedCollectionView type and the sample application which is used for this is shown in the Image 1, here you can see that I have combo box with contains the columns name like I have place country and city which are used to group the data grid records. and one check box control which I will explain when I will discuss the code used to group the datagrid control.

Image 1

Code used to group the data grid record into group is show in the List 1, here you can see that I have function with name ArragePersonListByGroup which is called from the two separate location. In the viewModel I have define two properties one is the GroupBy which is of type string to hold the name of the by which we will group data grid records and in the setter of the GroupBy I have called the ArragePersonListByGroup function so that whenever user change the name from the combo box the grouping is changed.Second property IsNestedGroupAllowed which is of type Boolean type is used for the nested group mean if user want to see first group by country name then in the country he/she want to group by city then user first checked IsNestedGroupAllowed check box then nested grouping is done but if the IsNestedGroupAllowed is unchecked then nested grouping is not done only one level of grouping will done.

List 1

In the ArragePersonListByGroup function you see the first statement is to check the GroupBy property name to not equal to the "Select Column Name" mean if user select this option then he/she want to remove the grouping from the data grid records as the else statement you can see that I have clear the GroupDescriptions of the PersonList (which is of PagedCollectionView). For grouping we have used the GroupDescriptions property of the PagedCollectionView which provides a base class for defining how to divide the items in a collection into groups. After checking the GroupBy value to not equal to the "Select Column Name" again If condition is placed to check the IsNestedGroupAllowed ( to check if the user want to multiple level of grouping or not ) property and the null value ( as if no value is selected when application start then GroupBy has null value). First I have not checked the IsNestedGroupAllowed check box so the else part is executed where GroupDescriptions property of the PersonList (which is of PagedCollectionView type) is clear so that if any GroupDescriptions is already added then it should be removed and the new one will be added in the next statement. Now when user select column name from the combo box and check box Nested Group is unchecked then you can see the output in the Image 2.

Image 2

Now if user changed the column name from Country to City then grouping will be on the basis of the City name of the records and if user select "Select Column Name" then grouping will be clear.
Now the next case when user want multiple level of grouping in the records which you can see in the Image 3, here you can see that Nested Group checkbox is checked and first I have select country and then city from the combo box. You can see that first records are grouped in country name and within the country name the records are grouped with city name.

Image 3
The code for the multiple level of the grouping is listed in List 1, here you can see that if the IsNestedGroupAllowed property is true (when user checked the Nested Group checkbox from the UI) and GroupBy property is not null or empty is false. In the if condition is true mean user want multiple level of grouping then first I have check the GroupDescriptions collection if the selected GroupBy is already exist in the GroupDescriptions list or not if GroupBy is not already added then add the GroupBy in the GroupDescriptions collection.

Note : Here you have to check the group name if you didn't check for the already added group then it will add group multiple time as many as you have added it, So it is better to check as I have check in my code so that one group is added once if user selected it multiple times.

I have provided only two level of grouping of the records if you have more columns then you can provide it to more level of grouping.It is better to give as much functionality to end user as if he/she want to see the records in groups , he/she can arranged it into groups and in to multiple level as well.You can download the source code from here.

Note : You have to check for the null value of the group name if you didn't set the default value of the combo box (in my case I have used combo box to show column names) when application run and end user directly check the Nested Group check box (as no column is selected at that time, then a group with PagedCollectionView_Group.Model.Person (Person is the class name of the collection which I have used) is added.
All and any comments / bugs / suggestions are welcomed!

No comments: