PivotEngine Sort Control

The PivotEngine automatically sorts Dimension fields when it generates data summaries. It does not sort Measure fields by default. You can change the sort direction on row and column fields by setting the field's sort property in code. Measure fields are not sorted by default. You can set their sort direction by changing the sortDescriptions property of the engine's pivotView collection. This example shows how you can apply sorts to dimension and measure fields.

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import '@grapecity/wijmo.touch'; // support drag/drop on touch devices import * as wjOlap from '@grapecity/wijmo.olap'; import * as wjInput from '@grapecity/wijmo.input'; import * as wjCore from '@grapecity/wijmo'; import { getData } from './data'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { // // create pivot engine var ng = new wjOlap.PivotEngine({ itemsSource: getData(100), rowFields: ['Country', 'Product'], valueFields: ['Sales', 'Expenses'] }); // // create pivot grid var pivotGrid = new wjOlap.PivotGrid('#pivotGrid', { itemsSource: ng, }); // // change the sort order for the dimension (row/column) fields new wjInput.ComboBox('#sortCountry', { itemsSource: 'Ascending,Descending'.split(','), selectedIndexChanged: function (s, e) { ng.fields.getField('Country').descending = s.selectedIndex == 1; } }); new wjInput.ComboBox('#sortProduct', { itemsSource: 'Ascending,Descending'.split(','), selectedIndexChanged: function (s, e) { ng.fields.getField('Product').descending = s.selectedIndex == 1; } }); // // change the sort order for the measure (value) fields var sortSales = new wjInput.ComboBox('#sortSales', { itemsSource: 'None,Ascending,Descending'.split(','), selectedIndexChanged: function (s, e) { updateMeasureSort(); } }); var sortExpenses = new wjInput.ComboBox('#sortExpenses', { itemsSource: 'None,Ascending,Descending'.split(','), selectedIndexChanged: function (s, e) { updateMeasureSort(); } }); // // toggle subtotals document.getElementById('subtotals').addEventListener('click', function (e) { ng.showRowTotals = e.target.checked ? wjOlap.ShowTotals.Subtotals : wjOlap.ShowTotals.GrandTotals; }); // // utility function updateMeasureSort() { var sd = ng.pivotView.sortDescriptions; sd.clear(); addMeasureSort('Sales', sortSales.text); addMeasureSort('Expenses', sortExpenses.text); } // function addMeasureSort(fieldName, sortDirection) { if (sortDirection != 'None') { var sd = ng.pivotView.sortDescriptions, cols = pivotGrid.columns; for (var c = 0; c < cols.length; c++) { var binding = cols[c].binding; if (binding.indexOf(fieldName) == 0) { sd.push(new wjCore.SortDescription(binding, sortDirection == 'Ascending')); } } } } }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Grapecity Wijmo OLAP Fields Sort</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div class="container-fluid"> <div class="row"> <div class="col-xs-4 panel"> <h4> Sort Dimension fields </h4> <label> Country: <input id="sortCountry"> </label> <label> Product: <input id="sortProduct"> </label> <h4> Sort Measure fields </h4> <label> Sales: <input id="sortSales"> </label> <label> Expenses: <input id="sortExpenses"> </label> <label> Subtotals: <input id="subtotals" type="checkbox"> </label> </div> <div class="col-xs-8"> <div id="pivotGrid"></div> </div> </div> </div> </body> </html>
// create some random data export function getData(cnt) { var countries = 'US,Germany,UK,Japan,Italy'.split(','), products = 'Widgets,Gadgets,Doohickeys'.split(','), data = []; for (var i = 0; i < cnt; i++) { data.push({ country: countries[i % countries.length], product: products[i % products.length], downloads: Math.round(Math.random() * 20000), sales: Math.random() * 10000, expenses: Math.random() * 5000 }); } return data; }
.wj-pivotgrid { box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); } .panel label { display: block; } .panel label .wj-combobox { font-weight: normal; } h4 { margin-top: 20pt; } body { margin-bottom: 24pt; }
(function (global) { System.config({ transpiler: 'plugin-babel', babelOptions: { es2015: true }, meta: { '*.css': { loader: 'css' } }, paths: { // paths serve as alias 'npm:': 'node_modules/' }, // map tells the System loader where to look for things map: { 'jszip': 'npm:jszip/dist/jszip.js', '@grapecity/wijmo': 'npm:@grapecity/wijmo/index.js', '@grapecity/wijmo.input': 'npm:@grapecity/wijmo.input/index.js', '@grapecity/wijmo.styles': 'npm:@grapecity/wijmo.styles', '@grapecity/wijmo.cultures': 'npm:@grapecity/wijmo.cultures', '@grapecity/wijmo.chart': 'npm:@grapecity/wijmo.chart/index.js', '@grapecity/wijmo.chart.analytics': 'npm:@grapecity/wijmo.chart.analytics/index.js', '@grapecity/wijmo.chart.animation': 'npm:@grapecity/wijmo.chart.animation/index.js', '@grapecity/wijmo.chart.annotation': 'npm:@grapecity/wijmo.chart.annotation/index.js', '@grapecity/wijmo.chart.finance': 'npm:@grapecity/wijmo.chart.finance/index.js', '@grapecity/wijmo.chart.finance.analytics': 'npm:@grapecity/wijmo.chart.finance.analytics/index.js', '@grapecity/wijmo.chart.hierarchical': 'npm:@grapecity/wijmo.chart.hierarchical/index.js', '@grapecity/wijmo.chart.interaction': 'npm:@grapecity/wijmo.chart.interaction/index.js', '@grapecity/wijmo.chart.radar': 'npm:@grapecity/wijmo.chart.radar/index.js', '@grapecity/wijmo.chart.render': 'npm:@grapecity/wijmo.chart.render/index.js', '@grapecity/wijmo.chart.webgl': 'npm:@grapecity/wijmo.chart.webgl/index.js', '@grapecity/wijmo.gauge': 'npm:@grapecity/wijmo.gauge/index.js', '@grapecity/wijmo.grid': 'npm:@grapecity/wijmo.grid/index.js', '@grapecity/wijmo.grid.detail': 'npm:@grapecity/wijmo.grid.detail/index.js', '@grapecity/wijmo.grid.filter': 'npm:@grapecity/wijmo.grid.filter/index.js', '@grapecity/wijmo.grid.search': 'npm:@grapecity/wijmo.grid.search/index.js', '@grapecity/wijmo.grid.grouppanel': 'npm:@grapecity/wijmo.grid.grouppanel/index.js', '@grapecity/wijmo.grid.multirow': 'npm:@grapecity/wijmo.grid.multirow/index.js', '@grapecity/wijmo.grid.transposed': 'npm:@grapecity/wijmo.grid.transposed/index.js', '@grapecity/wijmo.grid.pdf': 'npm:@grapecity/wijmo.grid.pdf/index.js', '@grapecity/wijmo.grid.sheet': 'npm:@grapecity/wijmo.grid.sheet/index.js', '@grapecity/wijmo.grid.xlsx': 'npm:@grapecity/wijmo.grid.xlsx/index.js', '@grapecity/wijmo.grid.selector': 'npm:@grapecity/wijmo.grid.selector/index.js', '@grapecity/wijmo.grid.cellmaker': 'npm:@grapecity/wijmo.grid.cellmaker/index.js', '@grapecity/wijmo.nav': 'npm:@grapecity/wijmo.nav/index.js', '@grapecity/wijmo.odata': 'npm:@grapecity/wijmo.odata/index.js', '@grapecity/wijmo.olap': 'npm:@grapecity/wijmo.olap/index.js', '@grapecity/wijmo.pdf': 'npm:@grapecity/wijmo.pdf/index.js', '@grapecity/wijmo.viewer': 'npm:@grapecity/wijmo.viewer/index.js', '@grapecity/wijmo.xlsx': 'npm:@grapecity/wijmo.xlsx/index.js', '@grapecity/wijmo.undo': 'npm:@grapecity/wijmo.undo/index.js', '@grapecity/wijmo.interop.grid': 'npm:@grapecity/wijmo.interop.grid/index.js', '@grapecity/wijmo.touch': 'npm:@grapecity/wijmo.touch/index.js', '@grapecity/wijmo.cloud': 'npm:@grapecity/wijmo.cloud/index.js', 'jszip': 'npm:jszip/dist/jszip.js', 'bootstrap.css': 'npm:bootstrap/dist/css/bootstrap.min.css', 'css': 'npm:systemjs-plugin-css/css.js', 'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js', 'systemjs-babel-build':'npm:systemjs-plugin-babel/systemjs-babel-browser.js' }, // packages tells the System loader how to load when no filename and/or no extension packages: { src: { defaultExtension: 'js' }, "node_modules": { defaultExtension: 'js' }, } }); })(this);