[]
        
(Showing Draft Content)

Excel-like Filter in FlexGrid

The wijmo.grid.filter module provides a FlexGridFilter class that adds an Excel-style filtering UI to each column.


The FlexGridFilter adds filter icons to the column headers. Users may click the icons to see a drop-down where they can apply filters by value or by condition.

import * as wjGrid from '@mescius/wijmo.grid';
import * as wjGridFilter from '@mescius/wijmo.grid.filter';

function init() {
    // FlexGridFilter client-side filtering
    var theGrid = new wjGrid.FlexGrid('#theGrid', {
        itemsSource: data,
    });
    var filter = new wjGridFilter.FlexGridFilter(theGrid);
}

To include current selected values along with previously selected values when filtering data by value, users can use the Include Current Selection checkbox. This option is available in the filter dropdown of the grid. By default, the Include Current Selection option is hidden in the Filter By Value tab.   

IncludeCurrentSelection


The visibility of Include Current Selection checkbox is controlled using the showIncludeSelection property. To enable the Include Current Selection checkbox, set showIncludeSelection of FlexGridFilter class to true. By default, the showIncludeSelection property is set to false.  

When the Include Current Selection option is selected and the value filter is applied again, the previously selected rows (if any) are retained in the new filter along with the newly selected rows. For example, in the demo, when a user,  

  1. Applies a value filter with values ‘Germany’, and ‘Italy’. The grid displays rows with this filtered data.   

  1. Applies the value filter again with values ‘Greece’, and ‘Japan’. And this time the user checks the Include Current Selection checkbox.    

  1. Now, the datagrid will display filtered rows with values ‘Germany’, ‘Greece’, ‘Italy’ and ‘Japan’. The filter will retain the previously selected values in the filtered list.   

showincludeselection

The following example code is used to enable the Include Current Selection option in the filter tab. 

import * as wjGrid from '@mescius/wijmo.grid';  
import * as wjGridFilter from '@mescius/wijmo.grid.filter';  

function init() 
{  
// FlexGridFilter client-side filtering  
   var theGrid = new wjGrid.FlexGrid('#theGrid', {  
   itemsSource: data,  
   });  

// To enable/disable for all value filters 
   var filter = new wjGridFilter.FlexGridFilter(flexGrid);  
   filter.showIncludeSelection = true;  

//To enable/disable for a single column value filter 
  filter.getColumnFilter("country").valueFilter.showIncludeSelection = false;
}