Demo - Server-side Slicers

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.grapecity.com/wijmo/5.latest/styles/wijmo.min.css">
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.input.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.grid.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.grid.filter.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.olap.min.js"></script>
<div class="container">

  <h1>
    Server-side Slicers
  </h1>
  <p>
    To use Slicer controls (and value filters) with server-based
    pivot engines, you must set the <b>uniqueValues</b> property
    of the fields you want to filter on.
  </p>
  <p>
    This sample shows how you can use a Slicer (and value filter)
    with the Country field of a server-based pivot engine.
  </p>
  <div class="row">
    <div class="col-xs-3">
      <b>PivotPanel</b>
      <div id="pivotPanel"></div>
    </div>
    <div class="col-xs-3">
      <b>Slicer</b>
      <div id="slicer"></div>
    </div>
    <div class="col-xs-6">
      <b>PivotGrid</b>
      <div id="pivotGrid"></div>
    </div>
  </div>
  <p>
    For more details on using <b>wijmo.olap</b> with ComponentOne
    Data Services, please see
    <a href="http://helpcentral.componentone.com/nethelp/C1WebAPI/webframe.html#APIDataEngine.html" target="_blank">ComponentOne Data Engine WebApi</a>.
  </p>
</div>

CSS

.wj-slicer {
  display: block;
}

.wj-flexgrid {
  max-height: 400px;
}

body {
  margin-bottom: 24pt;
}

JavaScript

onload = function() {

  // initialize pivot engine
  var svcUrl = 'https://demos.componentone.com/ASPNET/c1webapi/4.0.20173.114/api/dataengine/';
  var ngCube = new wijmo.olap.PivotEngine({

    // connect to ComponentOne Data Service
    itemsSource: svcUrl + 'complex10',

    // build default view
    valueFields: ['Sales', 'Downloads'],
    rowFields: ['Country', 'Product']
  });

	// set Country field's unique values so we can use a slicer
  ngCube.defaultFilterType = 'Both';
  var fld = ngCube.fields.getField('Country');
  fld.filter.valueFilter.uniqueValues = 'China,Greece,Germany,India,Italy,Japan,Portugal,Russia,Spain,UK,US'.split(',');

  // show pivot panel
  var pivotPanel = new wijmo.olap.PivotPanel('#pivotPanel', {
    itemsSource: ngCube
  });

  // show slicer
  var slicer = new wijmo.olap.Slicer('#slicer', {
    field: fld,
    multiSelect: true
  });

  // show summary
  var pivotGrid = new wijmo.olap.PivotGrid('#pivotGrid', {
    itemsSource: ngCube
  });
}