Filter

API Reference

Overview

Webix Filter is a handy interactive tool for filtering complex datasets. The Filter widget allows you to filter data based on multiple criteria and visualize the result.

Webix Basic Filter widget

Initialization

var data = new webix.DataCollection({
  data:grid_data
});
 
webix.ui({
  view:"filter",
  type:"text",
  field:"title",
  data: data,
  on:{
    onChange(){
      const filter = this.getFilterFunction();
      data.filter(obj => filter(obj));
      console.log(data.data.order);
    }
  }
});

Main properties:

  • type (string) - defines the type of data to which the filter will be applied to ("number" by default);
  • field (string) - defines the data field for filtering;
  • template (string,function) - an optional parameter, can be used to change the look of the multiselect items (by default, displays the values from the field).

Related sample:  Filter: Basic Initialization

Working with Filter

The UI-related Filter widget contains three main elements:

  • The "rule" field. It is used for setting filtering rules. The list of rules depends on the type of Filter.
  • The input field. It is intended for entering the value for the filtering rule.
  • The multiselect list. It is used to narrow down filtered data by exact-match filtering.

Webix Filter widget

The "rule" Field

The filter rules are displayed in a popup. The list of rules depends on the type of Filter:

  • the rules for the "number" type

    • "greater"
    • "less"
    • "greater or equal"
    • "less or equal"
    • "equal"
    • "not equal"
  • the rules for the "text" type

    • "equal"
    • "not equal"
    • "contains"
    • "not contains"
  • for the "date" type Filter displays a daterangepicker (the input field will be hidden).

The Input Field

The type of the entered value is defined by the field property and corresponds to the related item of the dataset. Filtering is performed according to the selected rule:

{
    view:"filter",
    type:"number",
    field:"year",
 
    // ... 
}

Webix Filter Rules

The Multiselect List

You can configure the look of items inside the multiselect list using the template property:

{
    view:"filter",
    type:"number",
    field:"rating",
    template:function(obj){
        var value = obj.year;
        var color = value >= 1970 ? "green" : "red";
        return "<span style='color:"+color+"'>"+value+"</span>";
    },
    // ... 
}

Webix Filter Template

Related sample:  Filter: Templates

Setting Custom Filtering Rules

To define your own set of filtering rules for "The rule field", set the conditions. It will completely redefine the default rules for the type.

{
    view:"filter",
    type:"number",
    field:"year",
    conditions:[
        {id: ">", value: "greater", handler: (a, b) => a > b },
        {id: "<", value: "less", handler: (a, b) => a < b },
        {id: ">=", value: "greater or equal", handler: (a, b) => a >= b },
        {id: "<=", value: "less or equal", handler: (a, b) => a <= b }
    ]
    // ...
}

Custom set of filtering rules applies only to types "number" and "text".

Localization

You can localize Filter according to the peculiarities of a certain language. By default en-US locale is used. Name of button and the rules of used filters are stored in the webix.i18n.filter object:

webix.i18n.filter = {
    less: "less",
    lessOrEqual: "less or equal",
    greater: "greater",
    greaterOrEqual: "greater or equal",
    contains: "contains",
    notContains: "not contains",
    equal: "equal",
    notEqual: "not equal"
};

There are 2 ways of applying a custom locale:

  • alter the current working locale directly in the webix.i18n.filter object;
  • set a certain locale (e.g. fr-FR, ru-RU).

Apply the created locale with the help of the setLocale method.

More information about widget localization read in the related article.

Related Articles

Back to top