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 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".
Back to top