Row Collections

The FlexGrid control has three sets of rows: Header Rows, Scrollable Rows and Footer Rows. The three row collections are RowCollection objects, which extend regular arrays. You may add or remove rows by adding or removing Row objects from these arrays. In most cases, however, you won't add or remove scrollable rows, since the grid does that automatically when you set the itemsSource property.

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() { // // generate some random data var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','), data = []; for (var i = 0; i < countries.length; i++) { data.push({ country: countries[i], downloads: Math.round(Math.random() * 20000), sales: Math.random() * 10000, expenses: Math.random() * 5000 }); } // // grid with extra fixed row and a footer row var theGrid = new wjGrid.FlexGrid('#theGrid'); theGrid.columnHeaders.rows.push(new wjGrid.Row()); // add a header row theGrid.columnFooters.rows.push(new wjGrid.Row()); // add a footer row theGrid.bottomLeftCells.setCellData(0, 0, 'x'); // show some data on the first cell theGrid.itemsSource = data; // bind the grid } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexGrid Row Collections</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 { 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 } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { BrowserModule } from '@angular/platform-browser'; 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(); } initializeGrid(flex: wjcGrid.FlexGrid) { flex.columnHeaders.rows.push(new wjcGrid.Row()); // add a header row flex.columnFooters.rows.push(new wjcGrid.Row()); // add a footer row flex.bottomLeftCells.setCellData(0, 0, 'x'); // show some data on the first cell } private _getData() { // generate some random data let countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','), data = []; for (let i = 0; i < 200; i++) { data.push({ country: countries[i % countries.length], 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 Row Collections</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 (initialized)="initializeGrid(flex)" [(itemsSource)]="data"> </wj-flex-grid> </div> .wj-flexgrid { height: 200px; margin: 10px 0; } body { margin-bottom: 20pt; } <template> <div class="container-fluid"> <wj-flex-grid :initialized="initializeGrid" :itemsSource="grid.data"> </wj-flex-grid> </div> </template> <script> import "@grapecity/wijmo.styles/wijmo.css"; import 'bootstrap.css'; import Vue from 'vue'; import * as wjcGrid from '@grapecity/wijmo.grid'; import '@grapecity/wijmo.vue2.grid'; let App = Vue.extend({ name: 'app', data: function(){ let url = 'https://services.odata.org/Northwind/Northwind.svc'; return { grid: { data: null } } }, methods: { initializeGrid: function(flex) { this.grid.data = this.getData(); flex.columnHeaders.rows.push(new wjcGrid.Row()); // add a header row flex.columnFooters.rows.push(new wjcGrid.Row()); // add a footer row flex.bottomLeftCells.setCellData(0, 0, 'x'); // show some data on the first cell }, getData: function() { // generate some random data let countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','), data = []; for (let i = 0; i < 200; i++) { data.push({ country: countries[i % countries.length], downloads: Math.round(Math.random() * 20000), sales: Math.random() * 10000, expenses: Math.random() * 5000 }); } return data; } } }) 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>GrapeCity Wijmo FlexGrid Row Collections</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"; import * as wjGrid from "@grapecity/wijmo.grid"; class App extends React.Component { constructor(props) { super(props); this.state = { grid: { data: null } }; } render() { return <div className="container-fluid"> <wjcGrid.FlexGrid initialized={this.initializeGrid.bind(this)} itemsSource={this.state.grid.data}> </wjcGrid.FlexGrid> </div>; } initializeGrid(flex) { this.setState({ grid: { data: this.getData() } }); flex.columnHeaders.rows.push(new wjGrid.Row()); // add a header row flex.columnFooters.rows.push(new wjGrid.Row()); // add a footer row flex.bottomLeftCells.setCellData(0, 0, 'x'); // show some data on the first cell } getData() { // generate some random data let countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','), data = []; for (let i = 0; i < 200; i++) { data.push({ country: countries[i % countries.length], 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 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; }