Working 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();

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 the 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

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

You can set the initial value that will be used for filtering pivot. For this, you need to use the value property of the structure object during the Pivot initialization:

webix.ui({
  id:"pivot",
  view:"pivot",
  structure: {
    filters:[{name: "name", type: "text", value:"Argentina"}],
    ...
  }
});

In the above example Pivot data will be initially filtered by the value "Argentina".