Custom Editing

Although the FlexGrid provides efficient, Excel-style editing by default, you may want to customize the editing behavior in some cases. The simplest customization is making sure the grid is always in edit mode. This does not save the user any work, since they can edit by typing into cells at any time, but it does show users that the grid is editable. The easiest way to keep the grid in edit mode at all times is to call the startEditing method when the grid gets the focus and when the selection changes.

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import * as wjGrid from '@grapecity/wijmo.grid'; import '@grapecity/wijmo.input'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { // // create some random data var countries = 'US,Germany,UK,Japan,Sweden,Norway,Denmark'.split(','); var data = []; for (var i = 0; i < countries.length; i++) { data.push({ id: i, country: countries[i], sales: Math.random() * 10000, expenses: Math.random() * 5000, overdue: (i + 1) % 4 == 0 }); } // // create the grid with custom editing behavior var theGrid = new wjGrid.FlexGrid('#theGrid', { itemsSource: data, columns: [ { binding: 'id', header: 'ID', width: 50 }, { binding: 'country', header: 'Country', isRequired: true, dataMap: countries }, { binding: 'sales', header: 'Sales' }, { binding: 'expenses', header: 'Expenses' }, { binding: 'overdue', header: 'Overdue' } ], gotFocus: function (s, e) { s.startEditing(false); // quick mode }, selectionChanged: function (s, e) { setTimeout(function () { s.startEditing(false); // quick mode }, 50); // let the grid update first }, }); } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexGrid Always Editing</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> .wj-flexgrid { max-height: 200px; margin-bottom: 12px; } body { margin-bottom: 24px; } 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'; import * as wjcGrid from '@grapecity/wijmo.grid'; import '@grapecity/wijmo.input'; @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent { data: any[]; countries = ['US', 'Germany', 'UK' ,'Japan', 'Italy', 'Greece']; constructor() { this.data = this._getData(); } initializeGrid(flex: wjcGrid.FlexGrid) { flex.gotFocus.addHandler(() => { flex.startEditing(false); // quick mode }); flex.selectionChanged.addHandler(() => { setTimeout(() => { flex.startEditing(false); // quick mode }, 50); // let the grid update first }); } private _getData() { // create some random data let data = []; for (let i = 0; i < this.countries.length; i++) { data.push({ id: i, country: this.countries[i], sales: Math.random() * 10000, expenses: Math.random() * 5000, overdue: i % 4 == 0 }); } 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 Always Editing</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"> <!-- the grid --> <wj-flex-grid #flex [(itemsSource)]="data" (initialized)="initializeGrid(flex)"> <wj-flex-grid-column [binding]="'id'" [header]="'ID'" [width]="50"></wj-flex-grid-column> <wj-flex-grid-column [binding]="'country'" [header]="'Country'" [isRequired]="true" [dataMap]="countries"></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-column [binding]="'overdue'" [header]="'Overdue'"></wj-flex-grid-column> </wj-flex-grid> </div> .wj-flexgrid { max-height: 200px; margin-bottom: 12px; } body { margin-bottom: 24px; } <template> <div class="container-fluid"> <!-- the grid --> <wj-flex-grid :itemsSource="data" :initialized="initializeGrid"> <wj-flex-grid-column binding="id" header="ID" :width=50></wj-flex-grid-column> <wj-flex-grid-column binding="country" header="Country" :isRequired=true :dataMap="countries"></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-column binding="overdue" header="Overdue"></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.grid"; import '@grapecity/wijmo.input'; new Vue({ el: "#app", data: { data: null, countries: ['US', 'Germany', 'UK' ,'Japan', 'Italy', 'Greece'] }, methods:{ initializeGrid(flex){ this.data = this._getData(); flex.gotFocus.addHandler(() => { flex.startEditing(false); // quick mode }); flex.selectionChanged.addHandler(() => { setTimeout(() => { flex.startEditing(false); // quick mode }, 50); // let the grid update first }); }, _getData() { // create some random data let data = []; for (let i = 0; i < this.countries.length; i++) { data.push({ id: i, country: this.countries[i], sales: Math.random() * 10000, expenses: Math.random() * 5000, overdue: i % 4 == 0 }); } return data; } } }); </script> <style> .wj-flexgrid { max-height: 200px; margin-bottom: 12px; } body { margin-bottom: 24px; } </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.countries = ['US', 'Germany', 'UK', 'Japan', 'Italy', 'Greece']; this.state = { data: this.getData(), countries: this.countries }; } render() { return <div className="container-fluid"> <wjGrid.FlexGrid itemsSource={this.state.data} initialized={this.initializeGrid.bind(this)}> <wjGrid.FlexGridColumn header="ID" binding="id" width={50}></wjGrid.FlexGridColumn> <wjGrid.FlexGridColumn header="Country" binding="country" dataMap={this.state.countries}></wjGrid.FlexGridColumn> <wjGrid.FlexGridColumn header="Sales" binding="sales"></wjGrid.FlexGridColumn> <wjGrid.FlexGridColumn header="Expenses" binding="expenses"></wjGrid.FlexGridColumn> <wjGrid.FlexGridColumn header="Overdue" binding="overdue"></wjGrid.FlexGridColumn> </wjGrid.FlexGrid> </div>; } initializeGrid(flex) { flex.gotFocus.addHandler(() => { flex.startEditing(false); // quick mode }); flex.selectionChanged.addHandler(() => { setTimeout(() => { flex.startEditing(false); // quick mode }, 50); // let the grid update first }); } getData() { let data = []; for (let i = 0; i < this.countries.length; i++) { data.push({ id: i, country: this.countries[i], sales: Math.random() * 10000, expenses: Math.random() * 5000, overdue: i % 4 == 0 }); } 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 Always Editing</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: 200px; margin-bottom: 12px; } body { margin-bottom: 24px; }