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

Customizing the context menu based on a view type

To customize the context menu based on a view type, use the viewType parameter. In the code, 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;
});

Live example

Disabling the context menu

To disable the context menu, return an empty array in the parameter function of the customizeContextMenu API call:

function customizeContextMenuFunction(items, data, viewType) {
  return [];
}

Live example

See also

• More examples of how to customize the context menu
• Customizing the Toolbar
• Applying a CSS theme
• Adding localization