Make cells non-expandable and remove expand and collapse controls (for versions before 2.9.116)

Customizing the grid

by Flexmonster Pivot Table

HTML

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

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

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

CSS

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

.notexpandable {
  cursor: initial;
}

JavaScript

const pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  toolbar: true,
  customizeCell: customizeCellFunction,
  report: {
    dataSource: {
      filename: "data/data.json",
    },
    slice: {
      rows: [
        {
          uniqueName: "Country",
        },
        {
          uniqueName: "Color",
        },
      ],
      columns: [
        {
          uniqueName: "[Measures]",
        },
      ],
      measures: [
        {
          uniqueName: "Price",
        },
      ],
    },
  },
});

const nonExpandable = ["Canada", "Germany"];

function customizeCellFunction(cell, data) {
  if (
    data.hierarchy &&
    data.hierarchy.uniqueName == "Country" &&
    data.member &&
    nonExpandable.includes(data.member.caption)
  ) {
    let parts = cell.text.split(data.escapedLabel);
    if (parts.length == 2) {
      cell.text = `<div class='notexpandable' onclick='preventExpand(event)'>${data.escapedLabel}</div>${parts[1]}`;
    }
  }
}

function preventExpand(e) {
  e.stopImmediatePropagation();
}

function clearCustomizing() {
  pivot.customizeCell();
}

function startCustomizing() {
  pivot.customizeCell(customizeCellFunction);
}