Grid options

Options

by Ravi A

HTML

<link rel="stylesheet" href="https://s3.amazonaws.com/flexmonster/2.3/demo.css">
<script src="https://cdn.flexmonster.com/flexmonster.js"></script>

<table>
	<tr>
		<td style="width: 142px">
    <button class="btn" onclick="setGridOption('type', 'classic')">Classic view</button>
    <button class="btn" onclick="setGridOption('type', 'compact')">Compact view</button>
    <button class="btn" onclick="setGridOption('type', 'flat')">Flat view</button>
    <button class="btn" onclick="setGridOption('showFilter', false)">Hide filters</button>
    <button class="btn" onclick="setGridOption('showFilter', true)">Show filters</button>
    <button class="btn" onclick="setGridOption('showHeaders', false)">Hide headers</button>
    <button class="btn" onclick="setGridOption('showHeaders', true)">Show headers</button>
    <button class="btn" onclick="setGridOption('showTotals', 'off')">Hide totals</button>
    <button class="btn" onclick="setGridOption('showTotals', 'on')">Show totals</button>
    </td>  
		<td style="width: 800px">
			<div id="pivot-container"></div>
		</td>
	</tr>
</table>

CSS

.btn {
 width: 140px;
}

TypeScript

function setGridOption(option, value) {
  flexmonster.setOptions({ 
  	grid: {
    	[option]: value
    }
  });
  flexmonster.refresh();
}

var pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  width: "100%",
  height: 460,
  toolbar: true,
  report: {
    dataSource: {
      dataSourceType: "json",
      data: getData()
    },
    slice: {
      pages: [{uniqueName: "Color"}, {uniqueName: "Quantity"}, {uniqueName: "State"}],
      rows: [{uniqueName: "Country"},{uniqueName: "City"}],
      columns: [{uniqueName: "[Measures]"}],
      measures: [{uniqueName: "Price"}],
      expands: {
            rows: [{
                    tuple: [
                        "country.[canada]"
                    ]
            }]
        }
    }
  }
});

function getData() {
  return [{
    "Color":"green",
    "M":"September",
    "W":"Wed",
    "Country" : "Canada",
    "State" : "Ontario",
    "City" : "Toronto",
    "Price":174,
    "Quantity":22
  },
  {
    "Color":"red",
    "M":"March",
    "W":"Mon",
    "Time":"1000",
    "Country" : "USA",
    "State" : "California",
    "City" : "Los Angeles",
    "Price":1664,
    "Quantity":19
  },
  {
    "Color":"red",
    "M":"January",
    "W":"Mon",
    "Country" : "Canada",
    "State" : "Quebec",
    "City" : "Montreal",
    "Price":1190,
    "Quantity":292
  },
  {
    "Color":"green",
    "D":"04/08/2014",
    "M":"August",
    "W":"Fri",
    "Time":"1000",
    "Country" : "USA",
    "State" : "California",
    "City" : "Los Angeles",
    "Price":1222,
    "Quantity":730
  },
  {
    "Color":"white",
    "M":"March",
    "W":"Wed",
    "Country" : "USA",
    "State" : "California",
    "City" : "Los Angeles",
    "Price":7941,
    "Quantity":73
  },
  {
    "Color":"red",
    "M":"August",
    "W":"Wed",
    "Country" : "Canada",
    "State" : "Ontario",
    "City" : "Toronto",
    "Price":6829,
    "Quantity":19
  },
  {
    "Color":"green",
    "M":"January",
  ...