Demo - Detail Dialog Customization

by Joel Parks

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://test-9c0be.firebaseapp.com/wijmo/styles/wijmo.css">
<script src="https://test-9c0be.firebaseapp.com/wijmo/controls/wijmo.js"></script>
<script src="https://test-9c0be.firebaseapp.com/wijmo/controls/wijmo.input.js"></script>
<script src="https://test-9c0be.firebaseapp.com/wijmo/controls/wijmo.grid.js"></script>
<script src="https://test-9c0be.firebaseapp.com/wijmo/controls/wijmo.grid.filter.js"></script>
<script src="https://test-9c0be.firebaseapp.com/wijmo/controls/wijmo.olap.js"></script>
<div class="container">

  <h1>
    Detail Dialog Customization
  </h1>
  <p>
    The <b>PivotGrid</b> allows you to drill-down into
    cells to see the data items that were used to calculate
    each summary.
  </p>
  <p>
    Users can invoke the detail dialog by double-clicking any
    value cell.
    You can also invoke the detail dialog by calling the grid's
    <b>showDetail</b> method and passing the coordinates
    of the cell.
  </p>
  <p>
    <button id="showDetail" class="btn btn-primary">
      Show Detail Dialog
    </button>
  </p>
  <p>
    The grid exposes the detail dialog through its
    <b>detailDialog</b> property, which can be used to customize
    the dialog as shown in this example.
  </p>
  <p>
    <label>
      Custom Detail Dialog
      <input id="customDetails" type="checkbox" checked="checked">
    </label>
  </p>
  <div id="pivotGrid"></div>
</div>

CSS

.wj-pivotgrid {
	box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
.wj-pivotgrid .large-value {
  color: green;
}
.wj-pivotgrid .small-value {
  color: red;
}

body {
  margin-bottom: 24pt;
}

JavaScript

onload = function() {

  // create a PivotEngine with a custom view
  var ngFmt = new wijmo.olap.PivotEngine({
    autoGenerateFields: false,
    itemsSource: getData(10000),
    showColumnTotals: 'GrandTotals',
    showRowTotals: 'None',
    fields: [
    	{ binding: 'product', header: 'Product' },
      { binding: 'date', header: 'Date', format: 'yyyy \"Q\"q' },
      { binding: 'sales', header: 'Sales', format: 'n0' },
      { binding: 'sales', header: 'Diff', format: 'p0', showAs: 'DiffRowPct' }
    ],
    rowFields: ['Date'],
    columnFields: ['Product'],
    valueFields: ['Sales', 'Diff']
  });

  // toggle detail customization
  var customDetails = document.getElementById('customDetails');

  // show summary
  var pivotGrid = new wijmo.olap.PivotGrid('#pivotGrid', {
    isReadOnly: true,
    itemsSource: ngFmt,
    formatItem: formatItem // customize the grid cells
  });

  // show detail dialog on click
  document.getElementById('showDetail').addEventListener('click', function() {
    var sel = pivotGrid.selection;
    if (sel.isValid) {
      pivotGrid.showDetail(sel.row, sel.col);
    } else {
			alert('Please select a cell in the PivotGrid first.')
    }
  });

  // customize detail dialog
  var detailDialog = pivotGrid.detailDialog,
  //var detailDialog = wijmo.Control.getControl("#pivotGrid"),
  detailGridHost = detailDialog.hostElement.querySelector('.wj-flexgrid'),
  detailGrid = wijmo.Control.getControl(detailGridHost);
  console.log(detailGridHost);

  // format cells in the detail grid
  detailGrid.formatItem.addHandler(function(s, e) {
    if (e.panel == s.cells && customDetails.checked) {
      var large = false,
        small = false;
      switch (s.columns[e.col].binding) {
        case 'sales':
        case 'downloads':
          var val = s.getCellData(e.row, e.col, false);
          large = val > 8;
          small = val < 6;
          break;
      }
      wijmo.toggleClass(e.cell, 'large-value', large);
      wijmo.toggleClass(e.cell,...