By default, FlexGrid only allows you to apply a single filter at a time. We can work around this by directly modifying the collectionView, allow us to apply multiple filters to a single grid.
Steps to Complete:
1. Initialize the main CollectionView with a filter
2. Update the main CollectionView when the filter string changes
3. Bind FlexGrid to the items of the main CollectionView, forcing the FlexGrid to create its own CollectionView
Initialize the main CollectionView with a filter
First, a CollectionView must be created and initialized with a filter, This filter will be used by the text input control to filter the country column.
This will allow users to filter this CollectionView's country column without effecting the other columns of the FlexGrid.
Update the main CollectionView when the filter string changes
Next, the main CollectionView needs updated when the input string of the filter changes.
This filters by the country name in the main CollectionView. This gets used to update the FlexGrid's own CollectionView so that the two filters can be applied simultaneously.
Bind FlexGrid to the items of the main CollectionView, forcing the FlexGrid to create its own CollectionView
Instead of binding the CollectionView to the FlexGrid, the item array of the CollectionView will get bound. This will force the FlexGrid to create its own CollectionView, meaning that we can apply a filter to the main CollectionView, as well as a second filter to the CollectionView of the FlexGrid.
You can find a live sample of the project discussed in this article here: http://jsfiddle.net/JParksGC/rwed85ex/