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

Setting Initial Filtering Value

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".

Back to top
If you have not checked yet, be sure to visit site of our main product Webix js frameworks and page of javascript pivot grid product.