Using PagedCollectionView Filter Using MVVM

Problem :

          When using data grid control there may be large amount of records in the data grid and to find out record which user is search is very difficult as he/she has to view every record to find out the desired record. So it is nice idea to have filter on the data grid records so the user can filter data grid records and find what he/she is looking in the data grid records

Solution :

          To provide the end user with some sort of filtering of the datagrid record we will use the Filter property of the PagedCollectionView. Example which is used for the filter property of the PagedCollectionView is shown in the Image 1, here you can see that I have used checkbox control to filter the active and in-active records in the datagrid control, combo box control to provide the searching of the First name in the data grid control and it has 3 values StartWith which is used to find the text entered in the text box at the start of the first name in the list, EndWith which is use to find the text entered in the text box at the end of the first name and 3rd one the Contains checks whether the specified text box  character combination occurs within first name. And the text box control used to entered any combination of character to search in the first name of the record.

Image 1

Code used for the filtering of the datagrid record is shown in the List 1. Here I have listed imported code which is only used to filter the record not the properties of the viewModel. In the viewModel I have null-able Boolean property for the Active which hold the value true ( active record), false (for in-active record) and null ( for all records). FirstNameOperator property which is used to hold the string value for the comparison of the first name property like StartWith, EndWith and Contains are the values which are shown in the combo box are selected in the FirstNameOperator. And FirstName property which is used to hold the user input for search the search first name.

List 1

You will notice that, the PagedCollectionView has a property called “Filter” which takes Predicate. The predicate will take callback which will provide the filtering logic. This callback method examines each row and indicates if the row should be included or excluded by returning true or false. Here, our PagedCollectionView is our collection named “Customer”. First of all set the Filter of this collection to null to remove the previous filtering. Then set a new Predicate function call to it.

The callback function FilterCustomerList takes the object first we need to convert the object to corresponding type here in our case as our PagedCollectionView is of type Customer so we need to convert it to Customer type.Next I have check for the active or in-active record if the value of the IsActive property is not null as in case of null we don't need to see the active or in-active records.If value is not null and the currentRecord which is passed to the callback , if Active property is not equal to the value of the IsActive then return false mean I don't want to include this record in the final output. I have used the false value to exclude the current record from the final list as you can see that at the end of the callback I have return true to include the record in the final list.When user checked or unchecked the checkbox the output is similar to the what has be shown in the Image 2, here you can see that only active records are shown as checkbox is checked, if you unchecked the checkbox then in-active records are shown.

Image 2

Second filter criteria which is the to filter by first name of the customer.The first name of the customer is the string type so we need to perform string operation on the first name field of the customer record.To check the first name of the customer I have created separate function to check the first name of the customer record which take the customer record and then perform the string operation like start with, end with and contain. Here you can see that I have used blnIsValid of type Boolean and set it to false mean record is not matched and will be excluded from the list. Then I have check the FirstNameOperator property to perform what user want to check in the first name first name field, mean user want to say e.g If use enter 'e' character in the text box and want to see the records which are start with the character 'e' then he/she will select StartWith operation, or user want to see the record which are end with character 'e' then he/she will select EndWith from the operation or if he/she want to see customer records which contain the character 'a' then he/she will select Contains operator. Output of the filter when user filter by first name is shown in the Image 3, here you can see that I have not used the active filter criteria.

Image 3

The final output when user use both active and first name criteria is shown in the Image 4, Here you can see that I have use the active records and then I have used the Contains operation for searching in the first name of the customer record and I have entered character 'e' to search in the first name. In the Image 3 you can see that I have search the records by entering the character 'e' in the text box control and used the Contains operator and we have total 5 records displayed in the Image 3 one is in-active and remain 4 are active records. And in Image 4 you can see I have only select the active record by checking the checkbox and the first name criteria is same as I have used in the Image 3.

Image 4

Hope you get idea of how to filter the data grid records when you have large amount of records are showing in the data grid control, by providing the filter criteria to filter the records end user can find the desired record quickly and hence he/she can save his/her time which he/she has to spend in order to search the specific record in the data grid control.You can download the source code from here.

All and any comments / bugs / suggestions are welcomed!