KB - Wijmo 5 - Multiple Filters

by Joel Parks

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://cdn.wijmo.com/5.20162.211/controls/wijmo.min.js"></script>
<link rel="stylesheet" href="http://cdn.wijmo.com/5.latest/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.input.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.filter.min.js"></script>
<div class="container">
  <h1>
    Multi-filter</h1>
  <p>
    This sample shows how you can combine filters by using
    the result set of one filter as the source for other
    collections (which in turn have their own filters):
  <p>
    Main filter: <input id="filter"></p>
  <p>
    FlexGrid with secondary filter:</p>
  <div id="flex"></div>

</div>

CSS

.wj-flexgrid {
  max-height: 300px;
}

JavaScript

window.onload = function() {

    // create data
    var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
        data = [];
    for (var i = 0; i < 1000; i++) {
        data.push({
        		id: i,
            country: countries[i % countries.length],
            downloads: Math.round(Math.random() * 20000),
            sales: Math.random() * 10000,
            expenses: Math.random() * 5000
        });
    }

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

    // update main CollectionView when filter string changes
    var dvFilter = document.getElementById('filter');
    dvFilter.addEventListener('input', function() {
        filter = dvFilter.value.toLowerCase();
        view.refresh();
        flex.itemsSource = view.items;
    });

    // create FlexGrid, bind it to view.items (instead of view)
    // this will cause the grid to create its own internal 
    // CollectionView
    var flex = new wijmo.grid.FlexGrid('#flex', {
    	itemsSource: view.items
    });
    
    // add filter to FlexGrid's CollectionView
    var f = new wijmo.grid.filter.FlexGridFilter(flex);
}