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'), '>');

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', '<');