Dragging fields

Options

by Flexmonster Pivot Table

HTML

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

<div>
  <p>
    When the
    <a
      href="https://www.flexmonster.com/api/grid-options-object/#dragging"
      target="_blank"
    >grid.dragging</a> option is set to <code>true</code>, fields can be dragged:
  </p>
  <ul>
    <li>Between columns, rows, and report filters</li>
    <li>Out of the grid</li>
  </ul>
</div>

<button onclick="disableDragging()">Disable dragging</button>
<button onclick="enableDragging()">Enable dragging</button>

<div id="pivot-container"></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: "Country",
        },
      ],
      columns: [
        {
          uniqueName: "Category",
        },
        {
          uniqueName: "[Measures]",
        }
      ],
      reportFilters: [
        {
          uniqueName: "Color",
        },
      ],
      measures: [
        {
          uniqueName: "Price",
        },
      ],
    },
  },
});

function enableDragging() {
  pivot.setOptions({
    grid: {
      dragging: true,
    },
  });
  pivot.refresh();
}

function disableDragging() {
  pivot.setOptions({
    grid: {
      dragging: false,
    },
  });
  pivot.refresh();
}