Skip to main content

filter()

filters data items in a component

filter(rule?: IFilterCallback | IFilterMode, config?: IFilterConfig): void;

Parameters:

  • rule: function | object - the filtering criteria
  • config: object - optional, defines the parameters of filtering

Example

grid.data.filter(function (item) {    return item.a > 0 && item.b !== "Apple";});
// orgrid.data.filter(function (item) {    return item.a > 0 && item.b !== "Apple";}, {    add: true});
// orgrid.data.filter({    by: "a",    match: "Orange",    compare: function (value, match, item) {        if (item.a !== "Some") {            return val === "New";        }    return false;    }}, {    add: true});

Related sample: Data. Filter

Calling the filter() method without parameters reverts the component to the initial state:

grid.data.filter();

The rule parameter:

  • if set as a function, the filtering will be applied by the rule specified in the function:
grid.data.filter(function (item) {    return item.a > 0 && item.b !== "Apple";});
  • if set as an object, the parameter has the following attributes:
by(string) mandatory, the id of a data field (the column of Grid)
match(string) mandatory, a pattern to match
compare(function) optional, a function for extended filtering that takes three parameters:
  • value - the value to compare (e.g. a column in a row for Grid)
  • match - a pattern to match
  • item - a data item the values of which should be compared (e.g. a row)

For example:

grid.data.filter({    by: "a",    match: "Orange",    compare: function (value, match, item) {        if (item.a !== "Some") {            return value === "New";        }    return false;});

The config parameter may contain two properties:

add(boolean) defines whether each next filtering will be applied to the already filtered data (true), or to the initial data (false, default)
smartFilter(boolean) defines whether a filtering rule will be applied after adding and editing items of the collection

For instance:

grid.data.filter(function (item) {    return item.a > 0 && item.b !== "Apple";}, {    add: true,    smartFilter: true});
grid.data.filter({    by: "a",    match: "Orange",    compare: function (value, match, item) {        if (item.a !== "Some") {            return val === "New";        }    return false;    }}, {    add: true,    smartFilter: true});