Column Sizing

You can specify the column widths when creating them. Ater that, users may resize the FlexGrid columns using the mouse. As in Excel, they may drag the column header's right edge, or double-click the edge to auto-size the the column so it fits its content.

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import { FlexGrid } from '@grapecity/wijmo.grid'; document.readyState === 'complete' ? init() : window.onload = init; function init() { // generate some random data 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 }); } var theGrid = new FlexGrid('#theGrid', { deferResizing: true, autoGenerateColumns: false, columns: [ { binding: 'id', header: 'ID', width: 60, allowResizing: false }, { binding: 'country', header: 'Country' }, { 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 Resizing 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 class="panel panel-warning"> <div class="panel-heading"> The grid also allows you to resize multiple columns at once. Select a range of columns and press the 'control' key while resizing them with the mouse, and all selected columns will be resized at once. </div> </div> <div class="panel panel-warning"> <div class="panel-heading"> Wijmo uses the HTML5 drag/drop API for column resizing. Unfortunately, most mobile devices do not support this API. If you want to support column resizing on mobile devices, we suggest you use the <a href="https://github.com/Bernardo-Castilho/dragdroptouch" target="_blank"> DragDropTouch polyfill </a>. </div> </div> </div> </body> </html> .wj-flexgrid { height: 150px; margin:10px 0; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import { Component, 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'; // @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent { data: any[]; // DataSvc will be passed by derived classes constructor() { this.data = this._getData(); } private _getData() { // generate some random data let countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','), data = []; for (let 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; } } // @NgModule({ imports: [WjGridModule, BrowserModule], declarations: [AppComponent], 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 Resizing 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 #flex [deferResizing]="true" [(itemsSource)]="data"> <wj-flex-grid-column [header]="'ID'" [binding]="'id'" [width]="60" [allowResizing]="false"></wj-flex-grid-column> <wj-flex-grid-column [header]="'Country'" [binding]="'country'"></wj-flex-grid-column> <wj-flex-grid-column [header]="'Sales'" [binding]="'sales'"></wj-flex-grid-column> <wj-flex-grid-column [header]="'Expenses'" [binding]="'expenses'"></wj-flex-grid-column> </wj-flex-grid> <div class="panel panel-warning"> <div class="panel-heading"> The grid also allows you to resize multiple columns at once. Select a range of columns and press the 'control' key while resizing them with the mouse, and all selected columns will be resized at once. </div> </div> <div class="panel panel-warning"> <div class="panel-heading"> Wijmo uses the HTML5 drag/drop API for column resizing. Unfortunately, most mobile devices do not support this API. If you want to support column resizing on mobile devices, we suggest you use the <a href="https://github.com/Bernardo-Castilho/dragdroptouch" target="_blank"> DragDropTouch polyfill </a>. </div> </div> </div> .wj-flexgrid { height: 150px; margin:10px 0; } <template> <div class="container-fluid"> <wj-flex-grid :deferResizing=true :itemsSource="data"> <wj-flex-grid-column header="ID" binding="id" :width=60 :allowResizing=false></wj-flex-grid-column> <wj-flex-grid-column header="Country" binding="country"></wj-flex-grid-column> <wj-flex-grid-column header="Sales" binding="sales"></wj-flex-grid-column> <wj-flex-grid-column header="Expenses" binding="expenses"></wj-flex-grid-column> </wj-flex-grid> <div class="panel panel-warning"> <div class="panel-heading"> The grid also allows you to resize multiple columns at once. Select a range of columns and press the 'control' key while resizing them with the mouse, and all selected columns will be resized at once. </div> </div> <div class="panel panel-warning"> <div class="panel-heading"> Wijmo uses the HTML5 drag/drop API for column resizing. Unfortunately, most mobile devices do not support this API. If you want to support column resizing on mobile devices, we suggest you use the <a href="https://github.com/Bernardo-Castilho/dragdroptouch" target="_blank"> DragDropTouch polyfill </a>. </div> </div> </div> </template> <script> import "@grapecity/wijmo.styles/wijmo.css"; import "bootstrap.css"; import Vue from "vue"; import "@grapecity/wijmo.vue2.grid"; import * as wjcGrid from "@grapecity/wijmo.grid"; new Vue({ el: "#app", data: function() { return { data : this._getData() }; }, methods:{ _getData() { // generate some random data let countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','), data = []; for (let 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; } } }); </script> <style> .wj-flexgrid { height: 150px; margin:10px 0; } </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/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> 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 wjGrid from '@grapecity/wijmo.react.grid'; class App extends React.Component { constructor(props) { super(props); this.state = { data: this.getData() }; } render() { return <div className="container-fluid"> <wjGrid.FlexGrid deferResizing={true} itemsSource={this.state.data}> <wjGrid.FlexGridColumn header="ID" binding="id" width={60} allowResizing={false}> </wjGrid.FlexGridColumn> <wjGrid.FlexGridColumn header="Country" binding="country"></wjGrid.FlexGridColumn> <wjGrid.FlexGridColumn header="Sales" binding="sales"></wjGrid.FlexGridColumn> <wjGrid.FlexGridColumn header="Expenses" binding="expenses"></wjGrid.FlexGridColumn> </wjGrid.FlexGrid> <div className="panel panel-warning"> <div className="panel-heading"> The grid also allows you to resize multiple columns at once. Select a range of columns and press the 'control' key while resizing them with the mouse, and all selected columns will be resized at once. </div> </div> <div className="panel panel-warning"> <div className="panel-heading"> Wijmo uses the HTML5 drag/drop API for column resizing. Unfortunately, most mobile devices do not support this API. If you want to support column resizing on mobile devices, we suggest you use the <a href="https://github.com/Bernardo-Castilho/dragdroptouch" target="_blank"> DragDropTouch polyfill </a>. </div> </div> </div>; } getData() { // generate some random data let countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','), data = []; for (let 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; } } 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 Column Resizing</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 { height: 150px; margin:10px 0; }