The Pivot structure selected in the popup can be customized with the help of the onBeforeApply event.
The event is fired on the "Apply" button click and its handler takes the structure object with chosen "filters", "values", "groupBy" as a parameter.
For example, you can specify header sorting before applying the selected structure:
webix.ui({
view: "pivot",
on:{
onBeforeApply: function(structure){
var filters = structure.filters;
// modify filters array
// ...
}
}
});
You can set the size of the popup containing the Pivot configuration with the help of the popup object:
webix.ui({
view:"pivot",
popup:{
popupWidth:800,
height:600
}
});
The onPopup event fires after a popup for configuring Pivot is created. The handler function takes one parameter:
pivot.attachEvent("onPopup", function(popup){
// your code
});
The "Fields" list can be sorted by applying "$sort" scheme. The ascending order is default. So, you can define only "text" as a keyword:
webix.ui({
view: "pivot",
on:{
onPopup: function(popup){
popup.$$("fields").define("scheme",{
$sort: {
by: "text"
}
});
}
}
});
You can customize a view configuration and add a new one into a layout with the help of the onViewInit event of pivot's popup.
A search field for fields list
The "Fields" list and its header are located in the "fieldsLayout" inner view of the Pivot popup.
To add a search field, you need to insert its configuration into the "rows" collection of the layout. The configuration will contain the onTimedKeyPress event handler for the list filtering
webix.ui({
id: "pivot",
view: "pivot",
popup:{
on:{
onViewInit: function(name, config){
if(name == "fieldsLayout"){
var searchConfig = {
view: "search",
on:{
onTimedKeyPress: function(){
var list, text,win;
win= $$("pivot").getConfigWindow();
list = win.$$("fields");
text = this.getValue();
list.filter("name", text);
}
}
};
config.rows.splice(1,0,searchConfig);
}
}
}
},
...
});
Related sample: Custom Popup Structure
Groups of fields
The "Fields" list can be split into multiple groups by replacing the "list" view with the "unitlist" one.
In the example below "balance", "gdp" and "oil" will be placed into the "number" group, other fields - into the "text" group.
var valueFields = {"balance":1,"gdp":1, "oil": 1};
webix.ui({
id: "pivot",
view: "pivot",
popup:{
on:{
onViewInit: function(name, config){
if(name == "fields"){
config.view = "unitlist";
config.uniteBy = function(item){
return valueFields[item.text]?"Number":"Text";
};
}
}
}
},
...
});
Back to top