Auto-Size Columns

This grid automatically resizes columns to fit their content. It does this by calling the autoSizeColumns method in response to events that affect the content size. Type some long entries into the "Countries" column to see the auto-sizing work.

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import * as wjGrid 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 < 10; i++) { data.push({ id: i, countries: getCountries(), sales: Math.random() * 10000, expenses: Math.random() * 5000 }); } // // show the data in a grid with fixed height var theGrid = new wjGrid.FlexGrid('#theGrid', { autoGenerateColumns: false, columns: [ { binding: 'id', header: 'ID', minWidth: 60, isReadOnly: true }, { binding: 'countries', header: 'Countries' }, { binding: 'sales', header: 'Sales', minWidth: 80 }, { binding: 'expenses', header: 'Expenses', minWidth: 80 } ], loadedRows: function (s, e) { s.autoSizeColumns(); }, cellEditEnded: function (s, e) { s.autoSizeColumn(e.col); }, rowEditEnded: function (s, e) { s.autoSizeColumns(); }, itemsSource: data, allowResizing: 'None' }); } <!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 Columns</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() * 2) + 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; } 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(); } // onLoadedRows(grid: wjGrid.FlexGrid) { grid.autoSizeColumns(); } // onCellEditEnded(grid: wjGrid.FlexGrid, e: wjGrid.CellEditEndingEventArgs) { grid.autoSizeColumn(e.col); } // onRowEditEnded(grid: wjGrid.FlexGrid) { grid.autoSizeColumns(); } } //\\ @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 Columns</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" [autoGenerateColumns]=false [allowResizing]="'None'" (loadedRows)="onLoadedRows(flexGrid)" (cellEditEnded)="onCellEditEnded(flexGrid,$event)" (rowEditEnded)="onRowEditEnded(flexGrid)"> <wj-flex-grid-column [binding]="'id'" [header]="'ID'" [minWidth]=60 [isReadOnly]=true></wj-flex-grid-column> <wj-flex-grid-column [binding]="'countries'" [header]="'Countries'"></wj-flex-grid-column> <wj-flex-grid-column [binding]="'sales'" [header]="'Sales'" [minWidth]=80></wj-flex-grid-column> <wj-flex-grid-column [binding]="'expenses'" [header]="'Expenses'" [minWidth]=80></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() * 2) + 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 < 10; i++) { data.push({ id: i, countries: getCountries(), sales: Math.random() * 10000, expenses: Math.random() * 5000 }); } return data; } } .wj-flexgrid { max-height: 300px; } <template> <div class="container-fluid"> <wj-flex-grid :itemsSource="data" :autoGenerateColumns="false" :allowResizing="'None'" :loadedRows="onLoadedRows" :cellEditEnded="onCellEditEnded" :rowEditEnded="onRowEditEnded" > <wj-flex-grid-column :binding="'id'" :header="'ID'" :minWidth="60" :isReadOnly="true" ></wj-flex-grid-column> <wj-flex-grid-column :binding="'countries'" :header="'Countries'"></wj-flex-grid-column> <wj-flex-grid-column :binding="'sales'" :header="'Sales'" :minWidth="80"></wj-flex-grid-column> <wj-flex-grid-column :binding="'expenses'" :header="'Expenses'" :minWidth="80"></wj-flex-grid-column> </wj-flex-grid> </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 { getData } from "./data"; let App = Vue.extend({ name: "app", data: function() { return { data: getData() }; }, methods: { onLoadedRows: function(grid) { grid.autoSizeColumns(); }, onCellEditEnded: function(grid, e) { grid.autoSizeColumn(e.col); }, onRowEditEnded: function(grid) { grid.autoSizeColumns(); } } }); new Vue({ render: h => h(App) }).$mount("#app"); </script> <style> .wj-flexgrid { max-height: 300px; } </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 data = []; for (var i = 0; i < 10; 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() * 2) + 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 * 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"> <wjcGrid.FlexGrid itemsSource={this.state.data} autoGenerateColumns={false} allowResizing="None" loadedRows={this.onLoadedRows.bind(this)} cellEditEnded={this.onCellEditEnded.bind(this)} rowEditEnded={this.onRowEditEnded.bind(this)}> <wjcGrid.FlexGridColumn binding="id" header="ID" minWidth={60} isReadOnly={true}></wjcGrid.FlexGridColumn> <wjcGrid.FlexGridColumn binding="countries" header="Countries"></wjcGrid.FlexGridColumn> <wjcGrid.FlexGridColumn binding="sales" header="Sales" minWidth={80}></wjcGrid.FlexGridColumn> <wjcGrid.FlexGridColumn binding="expenses" header="Expenses" minWidth={80}></wjcGrid.FlexGridColumn> </wjcGrid.FlexGrid> </div>; } onLoadedRows(grid) { grid.autoSizeColumns(); } onCellEditEnded(grid, e) { grid.autoSizeColumn(e.col); } onRowEditEnded(grid) { grid.autoSizeColumns(); } } 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: 300px; } export function getData() { var data = []; for (var i = 0; i < 10; 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() * 2) + 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(', '); }