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("select", true);
$$("pivot").filters.add("datepicker");

Removing filters

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

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

Related sample:  Removing Filters

Getting a collection of filters

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

var filters = $$("pivot").filters.get();

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:  DatePicker 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
If you have not checked yet, be sure to visit site of our main product Webix web ui framework and page of javascript pivot grid product.