Demo - FlexGridFilter Optimizations

by sarunokoshikake

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.grapecity.com/wijmo/5.latest/styles/wijmo.min.css">
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.grid.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.input.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.grid.filter.min.js"></script>
<div class="container">

  <h1>
    FlexGridFilter Optimizations</h1>
  <p>
    The <b>wijmo.grid.filter</b> module provides a <b>FlexGridFilter</b>
    class that adds an Excel-style filtering UI to each column. 
    The <b>FlexGridFilter</b> provides two types of filter: 
    by <b>value</b> and by <b>condition</b>.</p>
  <p>
    The <b>value</b> filter editor contains a list of unique values 
    for the user to choose from. If the grid contains a lot of data,
    this list of unique values may take a while to generate. 
    Furthermore, if the list contains too many values, it is not
    very useful (a condition filter may be more appropriate
    in these cases)</p>
  <p>    
    This sample shows how you can optimize the <b>value</b> filters
    in three ways:</p>
  <ol>
    <li>
      <b>uniqueValues</b>: The 'Rating' column filter specifies
      the list of possible unique values in the column, so the
      filter does not have to scan the data to build the list.</li>
    <li>
      <b>maxValues</b>: The 'Sales' column filter specifies
      that the list should show up to 20 values only. You may
      use the filter field in the editor to select which 
      values you are interested in.</li>
    <li>
      <b>filterType</b>: The 'Expenses' column filter specifies
      that the only filter type to be used is <b>condition</b>.
      A value filter will not even be displayed for this column.</li>
 ...

CSS

.wj-flexgrid {
  max-height: 250px;
  margin:10px 0;
}
body {
  margin-bottom: 20px;
}

JavaScript

onload = function () {

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

	// FlexGridFilter client-side filtering
  var theGrid = new wijmo.grid.FlexGrid('#theGrid', {
  	itemsSource: data
  });
  var filter = new wijmo.grid.filter.FlexGridFilter(theGrid);
  
  // ratings are values from 0 to 5
  var filterRating = filter.getColumnFilter('rating');
  filterRating.valueFilter.uniqueValues = [0, 1, 2, 3, 4, 5];
  
  // limit number of values shown in sales filter
  var filterSales = filter.getColumnFilter('sales');
	filterSales.valueFilter.maxValues = 20;
  
  // filter expenses only by condition
  var filterExpenses = filter.getColumnFilter('expenses');
  filterExpenses.filterType = 'Condition';
}