CollectionView Sorting

The CollectionView has a sortDescriptions property that controls the sorting behavior of items in the collection. The sample below demonstrates some simple sorting scenarios and updates the sortDescriptions property with SortDescription objects to apply the sort.

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import * as wijmo from '@grapecity/wijmo'; import * as grid from '@grapecity/wijmo.grid'; import { getData } from './data'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { // create a CollectionView let view = new wijmo.CollectionView(getData()); // // show the data in a grid let flex = new grid.FlexGrid('#theGrid', { itemsSource: view, showSort: true, allowSorting: false, alternatingRowStep: 0, headersVisibility: 'Column' }); // // change the sort document.addEventListener('change', e => { // remove the old sort view.sortDescriptions.clear(); // // add the new sorts e.target.value.split(',').forEach(prop => { // Sort country in ascending order, other in descending order view.sortDescriptions.push(new wijmo.SortDescription(prop, prop === 'country')); }); }); } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity CollectionView Sorting 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 class="container-fluid"> <label> <input type="radio" name="sort" value="" checked="true" /> No Sort </label> <label> <input type="radio" name="sort" value="country" /> Sort by Country </label> <label> <input type="radio" name="sort" value="country,sales" /> Sort by Country and Sales </label> <label> <input type="radio" name="sort" value="country,sales,downloads" /> Sort by Country, Sales, and Downloads </label> <p> Result: </p> <div id="theGrid"> </div> </div> </body> </html> export function getData() { let countries = ['US', 'Germany', 'UK', 'Japan', 'Italy', 'Greece'], data = []; // for (let i = 0; i < 1000; i++) { data.push({ country: countries[i % countries.length], downloads: Math.round(Math.random() * 20000), sales: Math.random() * 10000, expenses: Math.random() * 5000 }); } // return data; } .wj-flexgrid { max-height: 250px; } label { width: 100% } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import * as wijmo from '@grapecity/wijmo'; // import { Component, Inject, 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'; import { DataService } from './app.data'; // @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent { view: wijmo.CollectionView; // constructor(@Inject(DataService) private dataService: DataService) { this.view = new wijmo.CollectionView(dataService.getData()); // document.addEventListener('change', e => { // remove the old sort this.view.sortDescriptions.clear(); // // add the new sorts (<HTMLInputElement>e.target).value.split(',').forEach(prop => { // Sort country in ascending order, other in descending order this.view.sortDescriptions.push(new wijmo.SortDescription(prop, prop === 'country')); }); }); } } // @NgModule({ imports: [WjGridModule, BrowserModule], declarations: [AppComponent], providers: [DataService], 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 CollectionView Sorting Overview</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"> <label> <input type="radio" name="sort" value="" checked="true" /> No Sort </label> <label> <input type="radio" name="sort" value="country" /> Sort by Country </label> <label> <input type="radio" name="sort" value="country,sales" /> Sort by Country and Sales </label> <label> <input type="radio" name="sort" value="country,sales,downloads" /> Sort by Country, Sales, and Downloads </label> <p> Result: </p> <wj-flex-grid [itemsSource]="view" [showSort]="true" [allowSorting]="false" [alternatingRowStep]="0" [headersVisibility]="'Column'"> </wj-flex-grid> </div> import { Injectable } from '@angular/core'; // @Injectable() export class DataService { getData() { let countries = ['US', 'Germany', 'UK', 'Japan', 'Italy', 'Greece'], data = []; // for (let i = 0; i < 1000; i++) { data.push({ country: countries[i % countries.length], downloads: Math.round(Math.random() * 20000), sales: Math.random() * 10000, expenses: Math.random() * 5000 }); } // return data; } } .wj-flexgrid { max-height: 250px; } label { width: 100% } <template> <div class="container-fluid"> <label> <input type="radio" name="sort" value="" checked="true" /> No Sort </label> <label> <input type="radio" name="sort" value="country" /> Sort by Country </label> <label> <input type="radio" name="sort" value="country,sales" /> Sort by Country and Sales </label> <label> <input type="radio" name="sort" value="country,sales,downloads" /> Sort by Country, Sales, and Downloads </label> <p> Result: </p> <wj-flex-grid :items-source="view" :show-sort=true :allow-sorting=false :show-alternating-rows=false headers-visibility="Column"> </wj-flex-grid> </div> </template> <script> import "bootstrap.css"; import "@grapecity/wijmo.styles/wijmo.css"; import Vue from 'vue'; import * as wijmo from '@grapecity/wijmo'; import { getData } from './data'; import { WjGridModule } from '@grapecity/wijmo.vue2.grid'; new Vue({ el: '#app', data: function(){ return { view: new wijmo.CollectionView(getData()) } }, mounted: function(){ document.addEventListener('change', e => { // remove the old sort this.view.sortDescriptions.clear(); // // add the new sorts (e.target).value.split(',').forEach(prop => { // Sort country in ascending order, other in descending order this.view.sortDescriptions.push(new wijmo.SortDescription(prop, prop === 'country')); }); }); } }) </script> <style> .container-fluid .wj-flexgrid { max-height: 250px; } label { width: 100% } </style> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity CollectionView Sorting 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.vue'); </script> </head> <body> <div id="app"> </div> </body> </html> export function getData(callback, delay) { let countries = ['US', 'Germany', 'UK', 'Japan', 'Italy', 'Greece'], data = []; // for (let i = 0; i < 1000; i++) { data.push({ country: countries[i % countries.length], downloads: Math.round(Math.random() * 20000), sales: Math.random() * 10000, expenses: Math.random() * 5000 }); } // return data; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './app.css'; import * as React from 'react'; import * as ReactDOM from 'react-dom'; import * as wijmo from '@grapecity/wijmo'; import * as wjGrid from '@grapecity/wijmo.react.grid'; import { getData } from './data'; class App extends React.Component { constructor(props) { super(props); this.state = { view: new wijmo.CollectionView(getData()) }; } render() { return <div className="container-fluid"> <label> <input type="radio" name="sort" value="" defaultChecked={true}/> No Sort </label> <label> <input type="radio" name="sort" value="country"/> Sort by Country </label> <label> <input type="radio" name="sort" value="country,sales"/> Sort by Country and Sales </label> <label> <input type="radio" name="sort" value="country,sales,downloads"/> Sort by Country, Sales, and Downloads </label> <p> Result: </p> <wjGrid.FlexGrid itemsSource={this.state.view} showSort={true} allowSorting={false} showAlternatingRows={false} headersVisibility="Column"> </wjGrid.FlexGrid> </div>; } componentDidMount() { document.addEventListener('change', (e) => { // remove the old sort this.state.view.sortDescriptions.clear(); // // add the new sorts e.target.value.split(',').forEach((prop) => { // Sort country in ascending order, other in descending order this.state.view.sortDescriptions.push(new wijmo.SortDescription(prop, prop === 'country')); }); }); } } 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>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'); </script> </head> <body> <div id="app"></div> </body> </html> .wj-flexgrid { max-height: 250px; } label { width: 100% } export function getData() { let countries = ['US', 'Germany', 'UK', 'Japan', 'Italy', 'Greece'], data = []; // for (let i = 0; i < 1000; i++) { data.push({ country: countries[i % countries.length], downloads: Math.round(Math.random() * 20000), sales: Math.random() * 10000, expenses: Math.random() * 5000 }); } // return data; }