Sizing with the Mouse

By default, the FlexGrid allows users to drag the right edge of the column header cells to resize columns, or to double-click the right egde of the cell to auto-size the columns. You can use the allowResizing property to customize this behavior to prevent resizing altogether, or to allow users to resize columns by dragging the right edge of any cells. This last option is especially useful in grids without column headers.

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import * as wjGrid from '@grapecity/wijmo.grid'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { // // create some random data var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','); var data = []; for (var i = 0; i < 50; i++) { data.push({ id: i, country: countries[i % countries.length], sales: Math.random() * 10000, expenses: Math.random() * 5000 }); } // // show the data in a grid with fixed height var theGrid = new wjGrid.FlexGrid('#theGrid', { itemsSource: data }); // // show the data in a grid with auto height var theGridNoHeaders = new wjGrid.FlexGrid('#theGridNoHeaders', { itemsSource: data, headersVisibility: 'None', allowResizing: 'ColumnsAllCells' }); } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexGrid Sizing With Mouse</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 id="theGridNoHeaders"></div> </div> </body> </html> .wj-flexgrid { height: 200px; margin-bottom: 24pt; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // 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 Sizing With Mouse</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 [itemsSource]="data"></wj-flex-grid> <wj-flex-grid [itemsSource]="data" [headersVisibility]="'None'" [allowResizing]="'ColumnsAllCells'"></wj-flex-grid> </div> import { Injectable } from '@angular/core'; interface DataItem { id: number; country: string; 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 < 50; i++) { data.push({ id: i, country: countries[i % countries.length], sales: Math.random() * 10000, expenses: Math.random() * 5000 }); } return data; } } .wj-flexgrid { height: 200px; margin-bottom: 24pt; } <template> <div class="container-fluid"> <wj-flex-grid :itemsSource="data"></wj-flex-grid> <wj-flex-grid :itemsSource="data" :headersVisibility="'None'" :allowResizing="'ColumnsAllCells'" ></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() }; } }); new Vue({ render: h => h(App) }).$mount("#app"); </script> <style> .wj-flexgrid { height: 200px; margin-bottom: 24pt; } </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 < 50; i++) { data.push({ id: i, country: countries[i % countries.length], 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 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}></wjcGrid.FlexGrid> <wjcGrid.FlexGrid itemsSource={this.state.data} headersVisibility="None" allowResizing="ColumnsAllCells"></wjcGrid.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 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 { height: 200px; margin-bottom: 24pt; } export function getData() { var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','), data = []; for (var i = 0; i < 50; i++) { data.push({ id: i, country: countries[i % countries.length], sales: Math.random() * 10000, expenses: Math.random() * 5000 }); } return data; }