Sorting in the PivotGrid

The PivotEngine automatically sorts Dimension fields when it generates data summaries. It does not sort Measure fields by default. Users may switch the sort direction by clicking the headers on any PivotGrid control attached to the engine, when the grid's allowSorting property is set to true. The PivotGrid control does not show dimension field sort setting by default, but you can set the showRowFieldSort property to true if you want that feature.

Learn about OLAP | PivotGrid Sorting Documentation | PivotGrid API Reference

import 'bootstrap.css'; import '@mescius/wijmo.styles/wijmo.css'; import './styles.css'; import '@mescius/wijmo.touch'; // support drag/drop on touch devices import * as wjOlap from '@mescius/wijmo.olap'; import * as wjInput from '@mescius/wijmo.input'; import * as wjCore from '@mescius/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>MESCIUS Wijmo OLAP Pivot Grid Sort</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.21.5/system.src.js" integrity="sha512-skZbMyvYdNoZfLmiGn5ii6KmklM82rYX2uWctBhzaXPxJgiv4XBwJnFGr5k8s+6tE1pcR1nuTKghozJHyzMcoA==" crossorigin="anonymous"></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-sm-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-sm-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', '@mescius/wijmo': 'npm:@mescius/wijmo/index.js', '@mescius/wijmo.input': 'npm:@mescius/wijmo.input/index.js', '@mescius/wijmo.styles': 'npm:@mescius/wijmo.styles', '@mescius/wijmo.cultures': 'npm:@mescius/wijmo.cultures', '@mescius/wijmo.chart': 'npm:@mescius/wijmo.chart/index.js', '@mescius/wijmo.chart.analytics': 'npm:@mescius/wijmo.chart.analytics/index.js', '@mescius/wijmo.chart.animation': 'npm:@mescius/wijmo.chart.animation/index.js', '@mescius/wijmo.chart.annotation': 'npm:@mescius/wijmo.chart.annotation/index.js', '@mescius/wijmo.chart.finance': 'npm:@mescius/wijmo.chart.finance/index.js', '@mescius/wijmo.chart.finance.analytics': 'npm:@mescius/wijmo.chart.finance.analytics/index.js', '@mescius/wijmo.chart.hierarchical': 'npm:@mescius/wijmo.chart.hierarchical/index.js', '@mescius/wijmo.chart.interaction': 'npm:@mescius/wijmo.chart.interaction/index.js', '@mescius/wijmo.chart.radar': 'npm:@mescius/wijmo.chart.radar/index.js', '@mescius/wijmo.chart.render': 'npm:@mescius/wijmo.chart.render/index.js', '@mescius/wijmo.chart.webgl': 'npm:@mescius/wijmo.chart.webgl/index.js', '@mescius/wijmo.chart.map': 'npm:@mescius/wijmo.chart.map/index.js', '@mescius/wijmo.gauge': 'npm:@mescius/wijmo.gauge/index.js', '@mescius/wijmo.grid': 'npm:@mescius/wijmo.grid/index.js', '@mescius/wijmo.grid.detail': 'npm:@mescius/wijmo.grid.detail/index.js', '@mescius/wijmo.grid.filter': 'npm:@mescius/wijmo.grid.filter/index.js', '@mescius/wijmo.grid.search': 'npm:@mescius/wijmo.grid.search/index.js', '@mescius/wijmo.grid.grouppanel': 'npm:@mescius/wijmo.grid.grouppanel/index.js', '@mescius/wijmo.grid.multirow': 'npm:@mescius/wijmo.grid.multirow/index.js', '@mescius/wijmo.grid.transposed': 'npm:@mescius/wijmo.grid.transposed/index.js', '@mescius/wijmo.grid.transposedmultirow': 'npm:@mescius/wijmo.grid.transposedmultirow/index.js', '@mescius/wijmo.grid.pdf': 'npm:@mescius/wijmo.grid.pdf/index.js', '@mescius/wijmo.grid.sheet': 'npm:@mescius/wijmo.grid.sheet/index.js', '@mescius/wijmo.grid.xlsx': 'npm:@mescius/wijmo.grid.xlsx/index.js', '@mescius/wijmo.grid.selector': 'npm:@mescius/wijmo.grid.selector/index.js', '@mescius/wijmo.grid.cellmaker': 'npm:@mescius/wijmo.grid.cellmaker/index.js', '@mescius/wijmo.nav': 'npm:@mescius/wijmo.nav/index.js', '@mescius/wijmo.odata': 'npm:@mescius/wijmo.odata/index.js', '@mescius/wijmo.olap': 'npm:@mescius/wijmo.olap/index.js', '@mescius/wijmo.rest': 'npm:@mescius/wijmo.rest/index.js', '@mescius/wijmo.pdf': 'npm:@mescius/wijmo.pdf/index.js', '@mescius/wijmo.pdf.security': 'npm:@mescius/wijmo.pdf.security/index.js', '@mescius/wijmo.viewer': 'npm:@mescius/wijmo.viewer/index.js', '@mescius/wijmo.xlsx': 'npm:@mescius/wijmo.xlsx/index.js', '@mescius/wijmo.undo': 'npm:@mescius/wijmo.undo/index.js', '@mescius/wijmo.interop.grid': 'npm:@mescius/wijmo.interop.grid/index.js', '@mescius/wijmo.touch': 'npm:@mescius/wijmo.touch/index.js', '@mescius/wijmo.cloud': 'npm:@mescius/wijmo.cloud/index.js', '@mescius/wijmo.barcode': 'npm:@mescius/wijmo.barcode/index.js', '@mescius/wijmo.barcode.common': 'npm:@mescius/wijmo.barcode.common/index.js', '@mescius/wijmo.barcode.composite': 'npm:@mescius/wijmo.barcode.composite/index.js', '@mescius/wijmo.barcode.specialized': 'npm:@mescius/wijmo.barcode.specialized/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);