Configure a partial read-only mode

Options object

by Flexmonster Pivot Table

HTML

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

<div>
  <h2>Configure a read-only mode manually</h2>
  <p>
    To make the report read-only, set the
    <a
      href="https://www.flexmonster.com/api/options-object/#readOnly"
      target="_blank"
    >readOnly</a> option to <code>true</code>:
  </p>
  <div class="buttons-container">
    <div class="switch-container compact">
      <span class="text">Build-in read-only mode</span>
      <label class="switch">
        <input type="checkbox" id="readOnlyToggle" onclick="enableReadOnly()" />
        <span class="slider round"></span>
      </label>
    </div>
  </div>
  <p>
    You can also configure a partial read-only mode manually by turning off the
    features you don't need:
  </p>
  <div class="buttons-grid buttons-container">
    <div class="switch-container compact">
      <span class="text">Filters on the grid</span>
      <label class="switch">
        <input
          type="checkbox"
          id="filtersToggle"
          onclick="toggleFilters()"
          checked
        />
        <span class="slider round"></span>
      </label>
    </div>

    <div class="switch-container compact">
      <span class="text">Report filters area</span>
      <label class="switch">
        <input
          type="checkbox"
          id="reportFiltersToggle"
          onclick="toggleReportFilters()"
          checked
        />
        <span class="slider round"></span>
      </label>
    </div>

    <div class="switch-container compact">
      <span class="text">Field List button</span>
      <label class="switch">
        <input
          type="checkbox"
          id="fieldListToggle"
          onclick="toggleFieldList()"
          checked
        />
        <span class="slider round"></span>
      </label>
    </div>

    <div class="switch-container compact">
      <span class="text">Dragging</span>
      <label class="switch">
    ...

CSS

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

.buttons-container {
  padding: 0 15px;
}

JavaScript

let pivot = new Flexmonster({
      container: "pivot-container",
      componentFolder: "https://cdn.flexmonster.com/",
      height: 400,
      report: {
        dataSource: {
          type: "csv",
          filename: "data/happiness.csv",
        },
        slice: {
          reportFilters: [
            {
              uniqueName: "Year",
              filter: {
                members: ["year.[2019]"],
              },
            },
          ],
          rows: [
            {
              uniqueName: "Region",
            },
            {
              uniqueName: "Country or region",
            },
          ],
          columns: [
            {
              uniqueName: "[Measures]",
            },
          ],
          measures: [
            {
              uniqueName: "Overall rank",
              aggregation: "average",
            },
            {
              uniqueName: "GDP per capita",
              aggregation: "average",
            },
            {
              uniqueName: "Perceptions of corruption",
              aggregation: "average",
            },
          ],
          sorting: {
            column: {
              type: "desc",
              tuple: [],
              measure: {
                uniqueName: "Overall rank",
                aggregation: "average",
              },
            },
          },
          expands: {
            rows: [
              {
                tuple: ["region.[western europe]"],
              },
            ],
          },
        },
        formats: [
          {
            name: "",
            decimalPlaces: 2,
          },
        ],
      },
    });

 function updateToggleStates(readOnly) {
      const toggles = [
        'filtersToggle',
        'reportFiltersToggle', 
        'fieldListToggle',
        'draggingToggle',
        'drillThroughToggle',
        'sortingToggle',
        'expandCollapseToggle'
     ...