Hide or show the aggregation dropdown menu and calculated values buttons in the Field List

Options

by Flexmonster Pivot Table

HTML

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

<div class="buttons-row">
  <div class="switch-container compact">
    <label class="switch">
      <input type="checkbox" onclick="toggleAggregationsLabel()" checked>
      <span class="slider round"></span>
    </label>
    <span class="text">Aggregations dropdown (<b>Σ</b> icon)</span>
  </div>
  <div class="switch-container compact">
    <label class="switch">
      <input type="checkbox" onclick="toggleCalculatedValuesButton()" checked>
      <span class="slider round"></span>
    </label>
    <span class="text">Calculated values buttons</span>
  </div>
</div>

<div id="pivot-container">The component will appear here</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/",
  toolbar: true,
  report: {
    dataSource: {
      filename: "data/data.csv"
    },
    slice: {
      rows: [{
        uniqueName: "Color"
      }],
      columns: [{
        uniqueName: "[Measures]"
      }],
      measures: [{
        uniqueName: "Price",
      }]
    },
    options: {
      viewType: "grid",
      configuratorActive: true
    }
  }
});


function toggleAggregationsLabel() {
  setOption('showAggregations', !pivot.getOptions().showAggregations);
}

function toggleCalculatedValuesButton() {
setOption('showCalculatedValuesButton', !pivot.getOptions().showCalculatedValuesButton);
}

function setOption(option, value) {
  pivot.setOptions({
    [option]: value
  });
  pivot.refresh();
}