Sorting

The grid supports sorting via the source CollectionView. By default, clicking on any column header will sort the data based on the column that was clicked. Clicking the same column header again will revert the sort order. Control-clicking the column header will remove the sort. You may customize the sorting behavior using the grid's showSort and allowSorting properties.

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import * as wjGrid from '@grapecity/wijmo.grid'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { // // generate some random data var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','), data = []; for (var i = 0; i < countries.length; i++) { data.push({ id: i, country: countries[i], downloads: Math.round(Math.random() * 20000), sales: Math.random() * 10000, expenses: Math.random() * 5000 }); } // var theGrid = new wjGrid.FlexGrid('#theGrid', { deferResizing: true, autoGenerateColumns: false, columns: [ { binding: 'id', header: 'ID', width: 60, allowSorting: false }, { binding: 'country', header: 'Country' }, { binding: 'sales', header: 'Sales' }, { binding: 'expenses', header: 'Expenses' } ], itemsSource: data }); // } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexGrid Sorting</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 id="theGrid"></div> <div class="panel panel-warning"> <div class="panel-heading"> Although the <b>CollectionView</b> class supports sorting on multiple properties, the grid does not provide a UI for that. You can build your own Excel-style sort dialogs if you need that functionality. See for example the <a href="https://demos.wijmo.com/5/SampleExplorer/SampleExplorer/Sample/SortingGroupingUI" target="_blank">SortingGroupingUI</a> demo. </div> </div> </div> </body> </html> .wj-flexgrid { height: 150px; margin:10px 0; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import { Component, enableProdMode, NgModule } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { BrowserModule } from '@angular/platform-browser'; import { WjGridModule } from '@grapecity/wijmo.angular2.grid'; // @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent { data: any[]; constructor() { this.data = this._getData(); } private _getData() { let countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','), data = []; for (let i = 0; i < countries.length; i++) { data.push({ id: i, country: countries[i], downloads: Math.round(Math.random() * 20000), sales: Math.random() * 10000, expenses: Math.random() * 5000 }); } return data; } } // @NgModule({ imports: [WjGridModule, BrowserModule], declarations: [AppComponent], bootstrap: [AppComponent] }) export class AppModule { } // enableProdMode(); // Bootstrap application with hash style navigation and global services. platformBrowserDynamic().bootstrapModule(AppModule); <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexGrid Sorting</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Polyfills --> <script src="node_modules/core-js/client/shim.min.js"></script> <script src="node_modules/zone.js/dist/zone.min.js"></script> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.js"></script> <script src="systemjs.config.js"></script> <script> // workaround to load 'rxjs/operators' from the rxjs bundle System.import('rxjs').then(function (m) { System.set(SystemJS.resolveSync('rxjs/operators'), System.newModule(m.operators)); System.import('./src/app.component'); }); </script> </head> <body> <app-component></app-component> </body> </html> <div class="container-fluid"> <wj-flex-grid #flex [deferResizing]="true" [(itemsSource)]="data"> <wj-flex-grid-column [binding]="'id'" [header]="'ID'" [width]="60" [allowSorting]="false"></wj-flex-grid-column> <wj-flex-grid-column [binding]="'country'" [header]="'Country'"></wj-flex-grid-column> <wj-flex-grid-column [binding]="'sales'" [header]="'Sales'"></wj-flex-grid-column> <wj-flex-grid-column [binding]="'expenses'" [header]="'Expenses'"></wj-flex-grid-column> </wj-flex-grid> <div class="panel panel-warning"> <div class="panel-heading"> Although the <b>CollectionView</b> class supports sorting on multiple properties, the grid does not provide a UI for that. You can build your own Excel-style sort dialogs if you need that functionality. See for example the <a href="https://demos.wijmo.com/5/SampleExplorer/SampleExplorer/Sample/SortingGroupingUI" target="_blank">SortingGroupingUI</a> demo. </div> </div> </div> .wj-flexgrid { height: 150px; margin:10px 0; } <template> <div class="container-fluid"> <wj-flex-grid :deferResizing="true" :itemsSource="data"> <wj-flex-grid-column :binding="'id'" :header="'ID'" :width="60" :allowSorting="false"></wj-flex-grid-column> <wj-flex-grid-column :binding="'country'" :header="'Country'"></wj-flex-grid-column> <wj-flex-grid-column :binding="'sales'" :header="'Sales'"></wj-flex-grid-column> <wj-flex-grid-column :binding="'expenses'" :header="'Expenses'"></wj-flex-grid-column> </wj-flex-grid> <div class="panel panel-warning"> <div class="panel-heading"> Although the <b>CollectionView</b> class supports sorting on multiple properties, the grid does not provide a UI for that. You can build your own Excel-style sort dialogs if you need that functionality. See for example the <a href="https://demos.wijmo.com/5/SampleExplorer/SampleExplorer/Sample/SortingGroupingUI" target="_blank">SortingGroupingUI</a> demo. </div> </div> </div> </template> <script> import "@grapecity/wijmo.styles/wijmo.css"; import 'bootstrap.css'; import Vue from 'vue'; import '@grapecity/wijmo.vue2.core'; import '@grapecity/wijmo.vue2.grid'; let App = Vue.extend({ name: 'app', data: function(){ return { data: this._getData() } }, methods: { _getData: function() { let countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','), data = []; for (let i = 0; i < countries.length; i++) { data.push({ id: i, country: countries[i], downloads: Math.round(Math.random() * 20000), sales: Math.random() * 10000, expenses: Math.random() * 5000 }); } return data; } } }); new Vue({ render: h => h(App) }).$mount('#app'); </script> <style> .wj-flexgrid { height: 150px; margin:10px 0; } </style> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>AutoComplete</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.vue'); </script> </head> <body> <div id="app"> </div> </body> </html> import "@grapecity/wijmo.styles/wijmo.css"; import "bootstrap.css"; import "./app.css"; // import * as React from 'react'; import * as ReactDOM from 'react-dom'; import * as wjcGrid from "@grapecity/wijmo.react.grid"; import { getData } from "./data"; class App extends React.Component { constructor(props) { super(props); this.state = { data: getData() }; } render() { return <div className="container-fluid"> <wjcGrid.FlexGrid deferResizing={true} itemsSource={this.state.data}> <wjcGrid.FlexGridColumn binding="id" header="ID" width={60} allowSorting={false}></wjcGrid.FlexGridColumn> <wjcGrid.FlexGridColumn binding="country" header="Country"></wjcGrid.FlexGridColumn> <wjcGrid.FlexGridColumn binding="sales" header="Sales"></wjcGrid.FlexGridColumn> <wjcGrid.FlexGridColumn binding="expenses" header="Expenses"></wjcGrid.FlexGridColumn> </wjcGrid.FlexGrid> <div className="panel panel-warning"> <div className="panel-heading"> Although the <b>CollectionView</b> class supports sorting on multiple properties, the grid does not provide a UI for that. You can build your own Excel-style sort dialogs if you need that functionality. See for example the <a href="https://demos.wijmo.com/5/SampleExplorer/SampleExplorer/Sample/SortingGroupingUI" target="_blank">SortingGroupingUI</a> demo. </div> </div> </div>; } } ReactDOM.render(<App />, document.getElementById('app')); <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Grapecity Wijmo OLAP Pivot Chart Overview</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 id="app"></div> </body> </html> .wj-flexgrid { height: 150px; margin:10px 0; } export function getData() { let countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','), data = []; for (let i = 0; i < countries.length; i++) { data.push({ id: i, country: countries[i], downloads: Math.round(Math.random() * 20000), sales: Math.random() * 10000, expenses: Math.random() * 5000 }); } return data; }