Persisting the Grid State

This example shows how you can save and restore the grid state, including column layout, sort descriptions, and filter definitions. Try reordering, resizing, sorting, and filtering the columns on the grid below. Then press the "Save" button to save the state to local storage. Run the sample again and press the "Restore" button to restore the layout that you saved:

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import * as wjGrid from '@grapecity/wijmo.grid'; import * as wjGridFilter from '@grapecity/wijmo.grid.filter'; import * as wjCore from '@grapecity/wijmo'; import { getData } from './data'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { // // create a grid with a filter var theGrid = new wjGrid.FlexGrid('#theGrid', { itemsSource: getData() }); var theFilter = new wjGridFilter.FlexGridFilter(theGrid); // // save/restore grid state document.getElementById('btnSave').addEventListener('click', function () { var state = { columns: theGrid.columnLayout, filterDefinition: theFilter.filterDefinition, sortDescriptions: theGrid.collectionView.sortDescriptions.map(function (sortDesc) { return { property: sortDesc.property, ascending: sortDesc.ascending }; }) }; localStorage['gridState'] = JSON.stringify(state); }); document.getElementById('btnRestore').addEventListener('click', function () { var json = localStorage['gridState']; if (json) { var state = JSON.parse(json); // // restore column layout (order/width) theGrid.columnLayout = state.columns; // // restore filter definitions theFilter.filterDefinition = state.filterDefinition; // // restore sort state var view = theGrid.collectionView; view.deferUpdate(function () { view.sortDescriptions.clear(); for (var i = 0; i < state.sortDescriptions.length; i++) { var sortDesc = state.sortDescriptions[i]; view.sortDescriptions.push(new wjCore.SortDescription(sortDesc.property, sortDesc.ascending)); } }); } }); } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexGrid Persisting the Grid State</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> <button id="btnSave" class="btn btn-default"> Save State </button> <button id="btnRestore" class="btn btn-default"> Restore State </button> </div> </body> </html> // generate some random data export function getData() { 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 }); } return data; } .wj-flexgrid { max-height: 250px; margin: 10px 0; } body { margin-bottom: 20px; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import * as wjCore from '@grapecity/wijmo'; import * as wjGrid from '@grapecity/wijmo.grid'; import * as wjGridFilter from '@grapecity/wijmo.grid.filter'; import { Component, Inject, enableProdMode, NgModule, ViewChild, AfterViewInit } 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 implements AfterViewInit { @ViewChild('flexGrid') flexGrid: wjGrid.FlexGrid; data: any; gridFilter: wjGridFilter.FlexGridFilter; // DataSvc will be passed by derived classes constructor(@Inject(DataService) private dataService: DataService) { this.data = dataService.getData(); } // ngAfterViewInit() { this.gridFilter = new wjGridFilter.FlexGridFilter(this.flexGrid); } // onSaveStateClick() { var state = { columns: this.flexGrid.columnLayout, filterDefinition: this.gridFilter.filterDefinition, sortDescriptions: this.flexGrid.collectionView.sortDescriptions.map(function (sortDesc) { return { property: sortDesc.property, ascending: sortDesc.ascending }; }) } localStorage['gridState'] = JSON.stringify(state); } // onRestoreClick() { var json = localStorage['gridState']; if (json) { var state = JSON.parse(json); // // restore column layout (order/width) this.flexGrid.columnLayout = state.columns; // // restore filter definitions this.gridFilter.filterDefinition = state.filterDefinition; // // restore sort state var view = this.flexGrid.collectionView; view.deferUpdate(function () { view.sortDescriptions.clear(); for (var i = 0; i < state.sortDescriptions.length; i++) { var sortDesc = state.sortDescriptions[i]; view.sortDescriptions.push( new wjCore.SortDescription(sortDesc.property, sortDesc.ascending) ); } }); } } } //\\ @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 Wijmo FlexGrid Persisting the Grid State</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 #flexGrid [itemsSource]="data"></wj-flex-grid> <button class="btn btn-default" (click)="onSaveStateClick()"> Save State </button> <button class="btn btn-default" (click)="onRestoreClick()"> Restore State </button> </div> import { Injectable } from '@angular/core'; interface DataItem { id: number; country: string; downloads: number; sales: number; expenses: number; } @Injectable() export class DataService { getData(): DataItem[] { 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 }); } return data; } } .wj-flexgrid { max-height: 250px; margin: 10px 0; } body { margin-bottom: 20px; } <template> <div class="container-fluid"> <wj-flex-grid :itemsSource="data" :initialized="initGrid"></wj-flex-grid> <button class="btn btn-default" @click="onSaveStateClick">Save State</button> <button class="btn btn-default" @click="onRestoreClick">Restore State</button> </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"; import * as wjcGrid from "@grapecity/wijmo.grid"; import * as wjGridFilter from '@grapecity/wijmo.grid.filter'; import { getData } from "./data"; let App = Vue.extend({ name: "app", data: function() { return { data: getData(), gridFilter: null, flexGrid: null }; }, methods: { initGrid: function(grid){ this.flexGrid = grid; }, onSaveStateClick: function() { var state = { columns: this.flexGrid.columnLayout, filterDefinition: this.gridFilter.filterDefinition, sortDescriptions: this.flexGrid.collectionView.sortDescriptions.map(function (sortDesc) { return { property: sortDesc.property, ascending: sortDesc.ascending }; }) } localStorage['gridState'] = JSON.stringify(state); }, onRestoreClick: function() { var json = localStorage['gridState']; if (json) { var state = JSON.parse(json); // restore column layout (order/width) this.flexGrid.columnLayout = state.columns; // restore filter definitions this.gridFilter.filterDefinition = state.filterDefinition; // restore sort state var view = this.flexGrid.collectionView; view.deferUpdate(function () { view.sortDescriptions.clear(); for (var i = 0; i < state.sortDescriptions.length; i++) { var sortDesc = state.sortDescriptions[i]; view.sortDescriptions.push( new wijmo.SortDescription(sortDesc.property, sortDesc.ascending) ); } }); } } }, mounted: function() { this.gridFilter = new wjGridFilter.FlexGridFilter(this.flexGrid); } }); new Vue({ render: h => h(App) }).$mount("#app"); </script> <style> .wj-flexgrid { max-height: 250px; margin: 10px 0; } body { margin-bottom: 20px; } </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/jszip/dist/jszip.js"></script> <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() { 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 }); } return data; } 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 wjcCore from '@grapecity/wijmo'; import * as wjGridFilter from '@grapecity/wijmo.grid.filter'; 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(), gridFilter: null, flexGrid: null }; } render() { return <div className="container-fluid"> <wjcGrid.FlexGrid itemsSource={this.state.data} initialized={this.initGrid.bind(this)}> </wjcGrid.FlexGrid> <button className="btn btn-default" onClick={this.onSaveStateClick.bind(this)}>Save State</button> <button className="btn btn-default" onClick={this.onRestoreClick.bind(this)}>Restore State</button> </div>; } componentDidMount() { this.setState({ gridFilter: new wjGridFilter.FlexGridFilter(this.flexGrid) }); } initGrid(grid) { this.flexGrid = grid; } onSaveStateClick() { var state = { columns: this.flexGrid.columnLayout, filterDefinition: this.state.gridFilter.filterDefinition, sortDescriptions: this.flexGrid.collectionView.sortDescriptions.map(function (sortDesc) { return { property: sortDesc.property, ascending: sortDesc.ascending }; }) }; localStorage['gridState'] = JSON.stringify(state); } onRestoreClick() { var json = localStorage['gridState']; if (json) { var state = JSON.parse(json); // restore column layout (order/width) this.flexGrid.columnLayout = state.columns; // restore filter definitions this.state.gridFilter.filterDefinition = state.filterDefinition; // restore sort state var view = this.flexGrid.collectionView; view.deferUpdate(function () { view.sortDescriptions.clear(); for (var i = 0; i < state.sortDescriptions.length; i++) { var sortDesc = state.sortDescriptions[i]; view.sortDescriptions.push(new wjcCore.SortDescription(sortDesc.property, sortDesc.ascending)); } }); } } } 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 { max-height: 250px; margin: 10px 0; } body { margin-bottom: 20px; } export function getData() { 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 }); } return data; }