Flexmonster provides a context menu for the grid and charts where you can drill through values, open filters, change aggregations, and perform other actions.
The context menu can be customized using the customizeContextMenu API call. You can add, remove, and edit menu items.
To see different examples of customizing the context menu, visit our Examples page.
As an input parameter, the customizeContextMenu API call takes a function in which the context menu can be customized. The following data is passed to this function:
The parameter function must return an updated array of ContextMenuItemObjects.
A context menu item can be removed by deleting the corresponding object from the array of ContextMenuItemObjects. The following code removes the Aggregation item from the context menu:
function customizeContextMenuFunction(items, data, viewType) {
items = items.filter(function(item) {
return item.label !== "Aggregation"
});
return items;
}
To add a new item to the context menu, insert a ContextMenuItemObject with the needed functionality to the array of items. In the following example, we add a Show grid and charts option to the context menu:
function customizeContextMenuFunction(items, data, viewType) {
items.push({
label: "Show grid and charts",
handler: function() {
pivot.showGridAndCharts();
}
});
return items;
}
To customize the context menu based on a view type, use the viewType parameter. In the code below, we are customizing the context menu for the flat view:
pivot.customizeContextMenu(function(items, data, viewType) {
if (viewType == "flat") {
items.push({
label: "Switch to charts",
handler: function() {
pivot.showCharts();
}
});
}
return items;
});
To disable the context menu, return an empty array in the parameter function of the customizeContextMenu API call:
function customizeContextMenuFunction(items, data, viewType) {
return [];
}
You may be interested in the following articles: