Customize the context menu for the flat view

Customizing the context menu

by Flexmonster Pivot Table

HTML

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

<div>
  <h2>How to customize the context menu for the flat view</h2>
  <p>
    The context menu can be customized using the
    <a
      href="https://www.flexmonster.com/api/customizecontextmenu/"
      target="_blank"
      >customizeContextMenu()</a
    >
    method. It has the <code>viewType</code> parameter, which is needed to
    customize the context menu for a certain view type.
  </p>
  <p>
    To customize the context menu for the flat view, check if the
    <code>viewType</code> is <code>flat</code>. In this example, we have added
    the <strong>Switch to charts</strong> option to the flat view's context menu
    (lines 41-59 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>

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

CSS

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

JavaScript

const pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  height: 430,
  toolbar: true,
  report: {
    dataSource: {
      filename: "data/data.csv"
    },
    options: {
      grid: {
        type: "flat"
      }
    },
    slice: {
      rows: [
        {
          uniqueName: "Color",
          filter: {
          	exclude: ["purple", "yellow"]
          }
        }, 
        {
          uniqueName: "Country"
        }
      ],
      columns: [
      	{
        	uniqueName: "[Measures]"
      	}
      ],
      measures: [
      	{
        	uniqueName: "Price"
      	}
      ],
    }
  }
});

pivot.customizeContextMenu(function(items, data, viewType) {
  if (viewType == "flat") {
    items.push({
      label: "Switch to charts",
      handler: function() {
        pivot.showCharts();
      }
    });
  }
  if (viewType == "charts") {
    items.push({
      label: "Switch to the flat view",
      handler: function() {
        pivot.showGrid("flat");
      }
    });
  }
  return items;
});