Docs
API

Filtering

Enable Filtering

To do column filterable, it needs to set in column property filter.
To show filter field in column header, needs to set filter.header: true
To add tip for filter field it need to set tip param. 


new FancyGrid({
  ...
  columns: [{
    index: 'company',
    title: 'Company',
    locked: true,
    filter: {
      header: true,
      emptyText: 'Search',
      tip: [
        'Contains: Google',
        'Equal: =Google Inc.',
        'Not Equal: !=Google Inc.'
      ].join("")
    }
  ...

Enable Search Filtering

Search is sub feature of filtering.
To enable it, it requires to define in tbar search field. 


new FancyGrid({
  ...
  tbar: [{
    type: 'search',
    width: 350,
    emptyText: 'Search',
    paramsMenu: true,
    paramsText: 'Parameters'
  }],
  ...

Filter operators

There are several operator that possible to use in filter field.
They are: <,>,<=,>=,=,!=

Server filtering

Enable server filtering is the same, but also needs to set in data remoteFilter: true and there are params that are sent in request.

Example of server filtering


new FancyGrid({
	...
  data: {
    remoteSort: true,
    remoteFilter: true,
    proxy: {
      url: '/ajax/filter.php'
    }
  },
  ...

Filter param is array. Each item contains 3 property, they are:

operator

Filter operator.

value

Filter value.

property

Data index by which needs to filter.

Example of filter request params


filter: [{
  operator: 'lt',
  value: 30,
  property: 'age'
},{
  operator: 'like',
  value: 'Adobe',
  property: 'company'
}]

Operators can not be sent on server as <, >, = and others.
That is why there are alternative names for them.

Methods

Sometimes it requires to filter grid without setting params in grid.
For example there is form with values that should run filtering on it's changing.
To do this there are 2 methods.

To use these methods it requires to set property filter to true

addFilter

(index: String, value: Mixed, [operator: String])

Filter operator.

Example: index with value


var grid = new FancyGrid({
  ...,
  filter: true,
  ...
});

grid.addFilter('name', 'Nick');

Example: index with value and operator


var grid = new FancyGrid({
  ...,
  filter: true,
  ...
});

grid.addFilter('age', 30, '<');

Example: filtering date column


var grid = new FancyGrid({
  ...,
  filter: true,
  ...
});
//Find items with dates less than 1-st January of 1977
grid.addFilter('birthday', new Date(1977, 0, 1), '<');

Example: filtering date column with string value.

In FancyGrid there is help function to parse string value to date.
It is Fancy.Date.parse('1977.07.21', 'Y.m.d'); 


var grid = new FancyGrid({
  ...,
  filter: true,
  ...
});

//Find items with dates more than 21-st July of 1977
grid.addFilter('birthday', Fancy.Date.parse('1977.07.21', 'Y.m.d'), '>');

Example: Several params


var grid = new FancyGrid({
  ...,
  filter: true,
  ...
});

grid.addFilter('name', ['Nick', 'Peter'], '=');

Example: custom filtering over handler


grid.addFilter('name', function(value, item){
  switch(value){
    case 'Nick':
    case 'Ivan':
    case 'Lorenzo':
      switch(item.get('position')){
        case 'CEO':
        case 'Manager':
          return true;
      }
	  break;
  }

  return false;
});

Example: Multi filtering at a time


var grid = new FancyGrid({
  ...
  filter: true,
  ...
});

...
grid.waitingForFilters = true;
grid.addFilter('name', 'Nick');
grid.addFilter('surname', 'Thomson');
grid.updateFilters();// It will update grid and set waitingForFilters to false.

clearFilter

([index: String], [sign: String])

Filter value.

Example: clean all filters


var grid = new FancyGrid({
	...,
	filter: true,
	...
});

grid.clearFilter();

Example: clean filters by data index


var grid = new FancyGrid({
	...,
	filter: true,
	...
});

grid.clearFilter('name');

Example: clean filters by data index and operator(sign)


var grid = new FancyGrid({
	...,
	filter: true,
	...
});

grid.clearFilter('age', '<');

getFilter

([index: String], [sign: String]): Object|String|Number|undefined

Example: Getting all filters


var grid = new FancyGrid({
  ...,
  filter: true,
  ...
});

var filters = grid.getFilter();

Example: Getting filters on data index equals to name


var grid = new FancyGrid({
  ...,
  filter: true,
  ...
});

var filter = grid.getFilter('name');

Example: Getting filter on data index equals to age and sign less


var grid = new FancyGrid({
  ...,
  filter: true,
  ...
});

var filter = grid.getFilter('age', '<');

updateFilters

()

This method is for advanced filters usage. It helps to increase perfomance for complex filtering.
It works in pair with waitingForFilters.

Sometimes it needs to add filters on several data indexes(columns) but every adding filter will run update of grid,
to avoid it you need set grid.waitingForFilters = true; and after adding filters run grid.updateFilters();

Example: Multi filtering at a time


var grid = new FancyGrid({
  ...
  filter: true,
  ...
});

...
grid.waitingForFilters = true;
grid.addFilter('name', 'Nick');
grid.addFilter('surname', 'Thomson');
grid.updateFilters();// It will update grid and set waitingForFilters to false.

Example: Stop clearFilter


var grid = new FancyGrid({
  ...
  filter: true,
  ...
});

...
//Some filtering
...
grid.waitingForFilters = true;
grid.clearFilter();//Clear all filters
grid.addFilter('name', 'Nick');
grid.updateFilters();// It will update grid and set waitingForFilters to false.
`