Working with Filters

Operations with Filters

You can add filters and manipulate them through the filters collection of Pivot and PivotChart.

Adding a new filter

To add a new filter, you should use the filters.add() method. It takes two parameters:

  • name - (string) the view name of the filter control
  • isSelect - (boolean) optional, indicates whether the added filter is a select control (needed for automatic options definition)
$$("pivot").filters.add("multiselect", true);
$$("pivot").filters.add("datepicker");

Getting a collection of filters

To get a collection of filters, use the filters.get() method:

var filters = $$("pivot").filters.get();//->["datepicker","multicombo","select","text"]

Removing filters

To remove existing filters, use the filters.remove() method:

$$("pivot").filters.remove("datepicker");

Related sample:  Adding a new filter

Changing Field for Filtering

Sometimes, we need to use different values for filtering. For example, if you use a date filter that returns timestamp values and you want to display formatted date values in Pivot. In such a case, you can put a pair of a formatted and a "timestamp" fields into the filterMap collection of Pivot (PivotChart).

A new data property can be added directly to data source or with the help of scheme $init. Properties of data items that begin with “$” are not added into the “Fields” list.

webix.ui({
    view: "pivot",
    scheme:{
        $init: function(item){
            item.$date = webix.i18n.parseFormatDate(item.date).valueOf();
        }
    },
    structure: {
        filters:[{name: "date", type: "datepicker"}],
        ...
    },
    filterMap: {
        date: "$date"
    }
});

Related sample:  Adding a new filter

Changing Parent of Pivot Filters

Pivot fires the onViewInit event on filters initialization. The event handler allows you to change filters configuration and initialize filters in a different parent view.

In the following example elements of the “filters” toolbar are placed into the “pivotFilters” rows layout:

webix.ui({
    id: "pivot",
    view: "pivot",
    on:{
        onViewInit: function(name, config){
            if(name == "filters" && $$("pivotFilters"))
                webix.ui(config.elements, $$("pivotFilters"));
            config.elements = false;
        }
    },
    ...
});

Related sample:  Custom filter container

Back to top