Auto-Size Rows

This grid automatically resizes rows to fit their content.

It does this by setting the autoRowHeights property to true.

Row heights are updated when the grid is bound, when cells are edited, and when columns are resized.

To see how this works, try resizing the "Countries" column or editing some cells in that column.

The autoRowHeights property is especially useful in grids that have columns with wrapping text (wordWrap = true).

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import { FlexGrid } from '@grapecity/wijmo.grid'; import { getCountries } from './data'; document.readyState === 'complete' ? init() : window.onload = init; function init() { // create some random data var data = []; for (var i = 0; i < 100; i++) { data.push({ id: i, countries: getCountries(), sales: Math.random() * 10000, expenses: Math.random() * 5000 }); } // show the data in a grid with autoRowHeights new FlexGrid('#theGrid', { autoRowHeights: true, autoGenerateColumns: false, columns: [ { binding: 'id', header: 'ID', width: 60, isReadOnly: true }, { binding: 'countries', header: 'Countries', width: '*', wordWrap: true }, { 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 Auto-size Rows</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> </body> </html> export function getCountries() { var countries = 'Austria,Belgium,Canada,Denmark,Estonia,Finland,Germany,Hungary,Ireland,Japan,Korea,Lebanon,Mexico,Norway,Portugal,Qatar,Romania,Spain,Turkey,Ukraine,Venezuela,Zaire'.split(','); var c = []; var cnt = Math.round(Math.random() * 8) + 1; var start = Math.round(Math.random() * countries.length); for (var i = 0; i < cnt; i++) { c.push(countries[(i + start) % countries.length]); } return c.join(', '); } .wj-flexgrid { max-height: 300px; width: 720px; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import * as wjGrid from '@grapecity/wijmo.grid'; 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 { data: any; // DataSvc will be passed by derived classes constructor(@Inject(DataService) private dataService: DataService) { this.data = dataService.getData(); } } @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 Auto-size Rows</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 [autoRowHeights]="true" [autoGenerateColumns]="false" [itemsSource]="data"> <wj-flex-grid-column [binding]="'id'" [header]="'ID'" [minWidth]=60 [isReadOnly]=true></wj-flex-grid-column> <wj-flex-grid-column [binding]="'countries'" [header]="'Countries'" [width]="'*'" [wordWrap]=true></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> import { Injectable } from '@angular/core'; interface DataItem { id: number; countries: string; sales: number; expenses: number; } function getCountries(): string { var countries = 'Austria,Belgium,Canada,Denmark,Estonia,Finland,Germany,Hungary,Ireland,Japan,Korea,Lebanon,Mexico,Norway,Portugal,Qatar,Romania,Spain,Turkey,Ukraine,Venezuela,Zaire'.split(','); var c = []; var cnt = Math.round(Math.random() * 8) + 1; var start = Math.round(Math.random() * countries.length); for (var i = 0; i < cnt; i++) { c.push(countries[(i + start) % countries.length]); } return c.join(', '); } @Injectable() export class DataService { getData(): DataItem[] { var data = []; for (var i = 0; i < 100; i++) { data.push({ id: i, countries: getCountries(), sales: Math.random() * 10000, expenses: Math.random() * 5000 }); } return data; } } .wj-flexgrid { max-height: 300px; width: 720px; } <template> <div class="container-fluid"> <wj-flex-grid :autoRowHeights="true" :autoGenerateColumns="false" :itemsSource="data"> <wj-flex-grid-column :binding="'id'" :header="'ID'" :minWidth="60" :isReadOnly="true"></wj-flex-grid-column> <wj-flex-grid-column :binding="'countries'" :header="'Countries'" :width="'*'" :wordWrap="true" ></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> </template> <script> import "@grapecity/wijmo.styles/wijmo.css"; import "bootstrap.css"; import Vue from "vue"; import * as wjGrid from '@grapecity/wijmo.grid'; import "@grapecity/wijmo.vue2.core"; import "@grapecity/wijmo.vue2.grid"; import { getData } from "./data"; let App = Vue.extend({ name: "app", data: function() { return { data: getData() }; } }); new Vue({ render: h => h(App) }).$mount("#app"); </script> <style> .container-fluid .wj-flexgrid { max-height: 300px; width: 720px; } </style> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexGrid Auto-size Rows</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 data = []; for (var i = 0; i < 100; i++) { data.push({ id: i, countries: getCountries(), sales: Math.random() * 10000, expenses: Math.random() * 5000 }); } return data; } function getCountries() { var countries = 'Austria,Belgium,Canada,Denmark,Estonia,Finland,Germany,Hungary,Ireland,Japan,Korea,Lebanon,Mexico,Norway,Portugal,Qatar,Romania,Spain,Turkey,Ukraine,Venezuela,Zaire'.split(','); var c = []; var cnt = Math.round(Math.random() * 8) + 1; var start = Math.round(Math.random() * countries.length); for (var i = 0; i < cnt; i++) { c.push(countries[(i + start) % countries.length]); } return c.join(', '); } import "@grapecity/wijmo.styles/wijmo.css"; import "bootstrap.css"; import "./app.css"; // import * as React from 'react'; import * as ReactDOM from 'react-dom'; // import { FlexGrid, FlexGridColumn } 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"> <FlexGrid autoRowHeights={true} autoGenerateColumns={false} itemsSource={this.state.data}> <FlexGridColumn binding="id" header="ID" minWidth={60} isReadOnly={true}/> <FlexGridColumn binding="countries" header="Countries" width="*" wordWrap={true}/> <FlexGridColumn binding="sales" header="Sales"/> <FlexGridColumn binding="expenses" header="Expenses"/> </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 Wijmo FlexGrid Auto-size Rows</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> .container-fluid .wj-flexgrid { max-height: 300px; width: 720px; } export function getData() { var data = []; for (var i = 0; i < 100; i++) { data.push({ id: i, countries: getCountries(), sales: Math.random() * 10000, expenses: Math.random() * 5000 }); } return data; } function getCountries() { var countries = 'Austria,Belgium,Canada,Denmark,Estonia,Finland,Germany,Hungary,Ireland,Japan,Korea,Lebanon,Mexico,Norway,Portugal,Qatar,Romania,Spain,Turkey,Ukraine,Venezuela,Zaire'.split(','); var c = []; var cnt = Math.round(Math.random() * 8) + 1; var start = Math.round(Math.random() * countries.length); for (var i = 0; i < cnt; i++) { c.push(countries[(i + start) % countries.length]); } return c.join(', '); }