Adding and Removing Rows

In most cases, you won't have to write code to add or remove rows from the grid. By default, it will have one row of column headers and one row per bound item (added automatically when you set the grid's itemsSource property).

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 }); } // the grid var theGrid = new FlexGrid('#theGrid', { itemsSource: data, allowAddNew: true, allowDelete: true }); // toggle new row position document.getElementById('newRowAtTop').addEventListener('click', function (e) { theGrid.newRowAtTop = e.target.checked; }); } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexGrid Adding and Removing 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"> <label> newRowAtTop <input id="newRowAtTop" type="checkbox"> </label> <div id="theGrid"></div> </div> </body> </html> .wj-flexgrid { height: 200px; margin: 10px 0; } body { margin-bottom: 20pt; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import { Component, enableProdMode, NgModule, ViewChild } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import * as wjcGrid from '@grapecity/wijmo.grid'; 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(); } @ViewChild('flex') grid: wjcGrid.FlexGrid; 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, FormsModule], 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 Adding and Removing 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"> <label> newRowAtTop <input [(ngModel)]="grid.newRowAtTop" type="checkbox"> </label> <wj-flex-grid #flex [allowAddNew]="true" [allowDelete]="true" [(itemsSource)]="data"> </wj-flex-grid> </div> .wj-flexgrid { height: 200px; margin: 10px 0; } body { margin-bottom: 20pt; } <template> <div class="container-fluid"> <label> newRowAtTop <input v-model="grid.newRowAtTop" @change="onValueChanged" type="checkbox"> </label> <wj-flex-grid :initialized="initData" :allowAddNew="true" :allowDelete="true" :itemsSource="grid.data" :newRowAtTo="grid.newRowAtTop"> </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'; let App = Vue.extend({ name: 'app', data: function(){ return { grid: { data: null, newRowAtTop: false, instance: null } } }, methods: { getData: function(s, e){ 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; }, initData: function(grid){ this.grid.instance = grid; this.grid.data = this.getData(); }, onValueChanged: function(){ this.grid.instance.newRowAtTop = this.grid.newRowAtTop; } } }) new Vue({ render: h => h(App) }).$mount('#app'); </script> <style> .wj-flexgrid { height: 200px; margin: 10px 0; } body { margin-bottom: 20pt; } </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 "@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"; class App extends React.Component { constructor(props) { super(props); this.state = { grid: { data: null, newRowAtTop: false, instance: null } }; } render() { return <div className="container-fluid"> <label> newRowAtTop <input onChange={this.onValueChanged.bind(this)} type="checkbox"/> </label> <wjcGrid.FlexGrid initialized={this.initData.bind(this)} allowAddNew={true} allowDelete={true} itemsSource={this.state.grid.data} newRowAtTo={this.state.grid.newRowAtTop}> </wjcGrid.FlexGrid> </div>; } getData() { 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; } initData(grid) { this.setState({ grid: { instance: grid, data: this.getData() } }, () => { this.grid = this.state.grid; }); } onValueChanged(evt) { this.grid.instance.newRowAtTop = evt.target.checked; } } 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: 10px 0; } body { margin-bottom: 20pt; }