Stable Sort

The CollectionView class has a stableSort property that allows you to keep the original sequence of items when sorting by any fields in the data objects. This sample creates a CollectionView based on a list of items sorted by Country and ID. If you sort the grid by any property (e.g. Active), items with the same sort property value will be sorted according to the original order (sorted by Country and ID).

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() { // default grid let theGrid = new grid.FlexGrid('#theGrid', { itemsSource: getView() }); // // create some random data function getView() { let data = getData(); // // sort data by country data.sort((a, b) => { return a.country < b.country ? -1 : a.country > b.country ? +1 : a.id - b.id; }); // // create a CollectionView with a stable sort return new wijmo.CollectionView(data, { useStableSort: true }); } } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity CollectionView Stable 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 id="theGrid"> </div> <div id="theGrid2"> </div> </div> </body> </html> // export function getData() { let countries = ['US', 'Germany', 'UK', 'Japan', 'Italy', 'Greece'], colors = ['Red', 'Green', 'Blue', 'White'], data = []; // for (let i = 0; i < 200; i++) { data.push({ id: i, country: countries[i % countries.length], color: colors[i % colors.length], active: i % 5 != 0, downloads: Math.round(Math.random() * 200000), sales: Math.random() * 100000, expenses: Math.random() * 50000 }); } // return data; } .wj-flexgrid { max-height: 250px; margin-bottom: 12px; } .header { display: inline-block; width: 150px; text-align: right; font-weight: normal; } 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) { let data = dataService.getData().sort((a, b) => { return a.country < b.country ? -1 : a.country > b.country ? +1 : a.id - b.id; }); // this.view = new wijmo.CollectionView(data, { useStableSort: true }); } } // @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 Stable Sort</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 [itemsSource]="view"></wj-flex-grid> </div> import { Injectable } from '@angular/core'; // export type TDataItem = { id: number; country: string; color: string; active: boolean; downloads: number; sales: number; expenses: number; } // @Injectable() export class DataService { getData() { let countries = ['US', 'Germany', 'UK', 'Japan', 'Italy', 'Greece'], colors = ['Red', 'Green', 'Blue', 'White'], data: TDataItem[] = []; // for (let i = 0; i < 200; i++) { data.push({ id: i, country: countries[i % countries.length], color: colors[i % colors.length], active: i % 5 != 0, downloads: Math.round(Math.random() * 200000), sales: Math.random() * 100000, expenses: Math.random() * 50000 }); } // return data; } } .wj-flexgrid { max-height: 250px; margin-bottom: 12px; } .header { display: inline-block; width: 150px; text-align: right; font-weight: normal; } <template> <div class="container-fluid"> <wj-flex-grid :items-source="view"></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", computed: { view: function() { let data = getData().sort((a, b) => { return a.country < b.country ? -1 : a.country > b.country ? +1 : a.id - b.id; }); return new wijmo.CollectionView(data, { useStableSort: true }); } } }); </script> <style> .container-fluid .wj-flexgrid { max-height: 250px; margin-bottom: 12px; } .header { display: inline-block; width: 150px; text-align: right; font-weight: normal; } </style> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity CollectionView Stable 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.vue'); </script> </head> <body> <div id="app"> </div> </body> </html> export function getData(callback, delay) { let countries = ['US', 'Germany', 'UK', 'Japan', 'Italy', 'Greece'], colors = ['Red', 'Green', 'Blue', 'White'], data= []; // for (let i = 0; i < 200; i++) { data.push({ id: i, country: countries[i % countries.length], color: colors[i % colors.length], active: i % 5 != 0, downloads: Math.round(Math.random() * 200000), sales: Math.random() * 100000, expenses: Math.random() * 50000 }); } // 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); let data = getData().sort((a, b) => { return a.country < b.country ? -1 : a.country > b.country ? +1 : a.id - b.id; }); this.state = { view: new wijmo.CollectionView(data, { useStableSort: true }) }; } render() { return <div className="container-fluid"> <wjGrid.FlexGrid itemsSource={this.state.view}> </wjGrid.FlexGrid> </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 CollectionView Stable 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 id="app"></div> </body> </html> .wj-flexgrid { max-height: 250px; margin-bottom: 12px; } .header { display: inline-block; width: 150px; text-align: right; font-weight: normal; } export function getData() { let countries = ['US', 'Germany', 'UK', 'Japan', 'Italy', 'Greece'], colors = ['Red', 'Green', 'Blue', 'White'], data = []; // for (let i = 0; i < 200; i++) { data.push({ id: i, country: countries[i % countries.length], color: colors[i % colors.length], active: i % 5 != 0, downloads: Math.round(Math.random() * 200000), sales: Math.random() * 100000, expenses: Math.random() * 50000 }); } // return data; }