Apply Multiple Filters to a Single Grid in JavaScript

Background:

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

Getting Started

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.

var filter = '';
var view = new wijmo.collection.CollectionView(data, {
    filter: function(item) {
        return !filter || item.country.toLowerCase().indexOf(filter > -1);
    }
}

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.

var dvFilter = document.getElementById('filter');
dvFilter.addEventListener('input', function() {
    filter = dvFilter.value.toLowerCase();
    view.refresh();
    flex.itemsSource = view.items;
});

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.

var flex = new wijmo.grid.FlexGrid('#flex', {
    itemsSource: views.items
});
var f = new wijmo.grid.filter.FlexGridFilter(flex);

You can find a live sample of the project discussed in this article here: http://jsfiddle.net/JParksGC/rwed85ex/

Tags: