Remove an item from the context menu

Customizing the context menu

by Flexmonster Pivot Table

HTML

<script src="https://cdn.flexmonster.com/flexmonster.js"></script>

<div>
  <h2>Remove an item from the context menu</h2>
  <p>
    The
    <a
      target="_blank"
      href="https://www.flexmonster.com/user-interface/#context-menu"
    >context menu</a> can be customized using the
    <a
      href="https://www.flexmonster.com/api/customizecontextmenu/"
      target="_blank"
    >customizeContextMenu()</a> method.
  </p>
  <p>
    In this example, we remove the <b>Aggregation</b> item from the context menu
    by deleting the corresponding object from the array of menu items (lines
    30-35 in the JavaScript box).
  </p>
  <p>
    <a
      href="https://www.flexmonster.com/doc/customizing-context-menu/"
      target="_blank"
    >Visit our docs to learn more about customizing the context menu</a>.
  </p>
</div>

<button onclick="startCustomizing()">Start Customizing</button>
<button onclick="clearCustomizing()">Clear Customizing</button>

<div id="pivot-container"></div>

CSS

@import url(https://cdn.flexmonster.com/assets/jsfiddle-styles.css);

JavaScript

let pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  width: "100%",
  height: 430,
  toolbar: true,
  report: {
    dataSource: {
      filename: "data/data.csv"
    },
    slice: {
      rows: [{
        uniqueName: "Category"
      }],
      columns: [{
          uniqueName: "Country"
        },
        {
          uniqueName: "[Measures]"
        }
      ],
      measures: [{
        uniqueName: "Price",
        aggregation: "sum"
      }]
    },
  }
});

function customizeContextMenuFunction(items, data, viewType) {
  items = items.filter(function(item) {
    return item.label !== "Aggregation"
  });
  return items;
}

function clearCustomizing() {
  pivot.customizeContextMenu(null);
}

function startCustomizing() {
  pivot.customizeContextMenu(customizeContextMenuFunction);
}