Customizing the context menu

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.

About the customizeContextMenu API call

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:

items - an array of ContextMenuItemObjects that describe context menu items and can be customized.
data - information about the right-clicked element.
viewType - view type that was right-clicked.

The parameter function must return an updated array of ContextMenuItemObjects.

Removing a context menu item

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;
}

Live example

Adding a new item to the context menu

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;
}

Live example