Enable the read-only mode for Flexmonster

Options object

by Flexmonster Pivot Table

HTML

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

<div>
  <h2>How to enable the read-only mode for Flexmonster</h2>
  <p>This example demonstrates how to make the component read-only.</p>
  <p>
    In the read-only mode, it's not possible to make any changes to the report
    via UI. For example, filtering, sorting, and the context menu are disabled.
  </p>
  <p>
    You can enable the read-only mode by setting the
    <a
      href="https://www.flexmonster.com/api/options-object/#readOnly"
      target="_blank"
    >options.readOnly</a> property to <code>true</code> (lines 17-19 in the 
    JavaScript box).
  </p>
  <p>
    <a href="https://www.flexmonster.com/doc/options/" target="_blank"
    >Learn more about Flexmonster's options in our documentation</a>.
  </p>
</div>

<button onclick="enableReadOnly(false)">Disable read-only mode</button>
<button onclick="enableReadOnly(true)">Enable read-only mode</button>

<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/",
  height: 400,
  report: {
    dataSource: {
      filename: "data/data.csv"
    },
    slice: {
    	rows: [{ uniqueName: "Category" }],
      columns: [
      	{ uniqueName: "Color" },
        { uniqueName: "[Measures]" }
      ],
      measures: [{ uniqueName: "Price" }]
    },
    options: {
      readOnly: true
    }
  }
});

function enableReadOnly(state) {
	pivot.setOptions({
  	readOnly: state
  });
  pivot.refresh();
}