You can add filters and manipulate them through the filters collection of Pivot and PivotChart.
To add a new filter, you should use the filters.add() method. It takes two parameters:
$$("pivot").filters.add("select", true);
$$("pivot").filters.add("datepicker");
To remove existing filters, use the filters.remove() method:
$$("pivot").filters.remove("datepicker");
Related sample: Removing 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 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
Back to top