Preserve Row Heights

When the data source changes, the FlexGrid automatically re-generates all rows, and resets their sizes to the original values. This sample shows how you can preserve the row heights when the data is refreshed. It uses the loadingRowsevent to save the original row heights and the loadedRows event to restore them.

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import * as wjGrid from '@grapecity/wijmo.grid'; import { getData } from './data'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { // // create the grid var theGrid = new wjGrid.FlexGrid('#theGrid', { itemsSource: getData(), allowResizing: 'Both' }); // // preserve row heights when refreshing the data var heightMap = null; theGrid.loadingRows.addHandler(function (s, e) { heightMap = new Map(); theGrid.rows.forEach(function (row) { heightMap.set(row.dataItem, row.height); }); console.log('saved'); }); theGrid.loadedRows.addHandler(function (s, e) { theGrid.rows.forEach(function (row) { var height = heightMap.get(row.dataItem); if (height != null) { row.height = height; } }); console.log('restored'); }); // // force a data reload document.getElementById('reload').addEventListener('click', function () { theGrid.collectionView.refresh(); }); } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexGrid Preserve Row Height</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"> <button id="reload" class="btn btn-default"> Reload </button> <div id="theGrid"> </div> </body> </html> // create some random data export function getData() { var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','), data = []; for (var i = 0; i < 200; i++) { data.push({ id: i, country: countries[i % countries.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: 6px 0; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import * as wjGrid from '@grapecity/wijmo.grid'; 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, DataItem } from './app.data'; // @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent implements AfterViewInit { @ViewChild('theGrid') theGrid: wjGrid.FlexGrid; data: any; // DataSvc will be passed by derived classes constructor(@Inject(DataService) private dataService: DataService) { this.data = dataService.getData(); } // ngAfterViewInit() { const grid = this.theGrid; var heightMap: Map<DataItem, number> = null; grid.loadingRows.addHandler(function () { // save heightMap = new Map(); grid.rows.forEach(function (row: wjGrid.Row) { heightMap.set(row.dataItem, row.height); }); console.log('saved'); }); grid.loadedRows.addHandler(function () { // restore grid.rows.forEach(function (row: wjGrid.Row) { var height = heightMap.get(row.dataItem); if (height != null) { row.height = height; } }); console.log('restored'); }); } // onReload() { this.theGrid.collectionView.refresh(); } } //\\ @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 Preserve Row Height</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"> <button class="btn btn-default" (click)="onReload()"> Reload </button> <wj-flex-grid #theGrid [itemsSource]="data" [allowResizing]="'Both'"></wj-flex-grid> </div> import { Injectable } from '@angular/core'; export interface DataItem { id: number; country: string; active: boolean; 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 < 200; i++) { data.push({ id: i, country: countries[i % countries.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: 6px 0; } <template> <div class="container-fluid"> <button class="btn btn-default" v-on:click="onReload"> Reload </button> <wj-flex-grid :items-source="data" allow-resizing="Both" :initialized="initialGrid"></wj-flex-grid> </div> </template> <script> import "@grapecity/wijmo.styles/wijmo.css"; import "bootstrap.css"; import Vue from "vue"; import "@grapecity/wijmo.vue2.grid"; import { getData } from "./data"; new Vue({ el: "#app", data: function() { return { data: getData() }; }, mounted: function() { var heightMap = null; this.grid.loadingRows.addHandler(() => { // save heightMap = new Map(); this.grid.rows.forEach((row) => { heightMap.set(row.dataItem, row.height); }); console.log('saved'); }); this.grid.loadedRows.addHandler(() => { // restore this.grid.rows.forEach((row) => { let height = heightMap.get(row.dataItem); if (height != null) { row.height = height; } }); console.log('restored'); }); }, methods: { initialGrid(grid) { this.grid = grid; }, onReload() { this.grid.collectionView.refresh(); } } }); </script> <style> .wj-flexgrid { max-height: 250px; margin: 6px 0; } </style> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexGrid Preserve Row Height</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() { var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','), data = []; for (var i = 0; i < 200; i++) { data.push({ id: i, country: countries[i % countries.length], active: i % 5 != 0, downloads: Math.round(Math.random() * 200000), sales: Math.random() * 100000, expenses: Math.random() * 50000 }); } 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 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"> <button className="btn btn-default" onClick={this.onReload.bind(this)}> Reload </button> <wjcGrid.FlexGrid itemsSource={this.state.data} allowResizing="Both" initialized={this.initialGrid.bind(this)}></wjcGrid.FlexGrid> </div>; } componentDidMount() { var heightMap = null; this.grid.loadingRows.addHandler(() => { heightMap = new Map(); this.grid.rows.forEach((row) => { heightMap.set(row.dataItem, row.height); }); console.log('saved'); }); this.grid.loadedRows.addHandler(() => { this.grid.rows.forEach((row) => { let height = heightMap.get(row.dataItem); if (height != null) { row.height = height; } }); console.log('restored'); }); } initialGrid(grid) { this.grid = grid; } onReload() { this.grid.collectionView.refresh(); } } 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: 6px 0; } export function getData() { var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','), data = []; for (var i = 0; i < 200; i++) { data.push({ id: i, country: countries[i % countries.length], active: i % 5 != 0, downloads: Math.round(Math.random() * 200000), sales: Math.random() * 100000, expenses: Math.random() * 50000 }); } return data; }