Unbound

All versions of the FlexGrid support an unbound mode, where you add rows and columns in code and the grid stores the data itself (there's no external data source). This sample shows how you can create and populate extra header rows, and how you can assign arbitrary (unbound) data to grid cells.

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() { // bind a grid to the raw data var theGrid = new wjGrid.FlexGrid('#theGrid'); theGrid.allowResizing = wjGrid.AllowResizing.Both; theGrid.allowDragging = wjGrid.AllowDragging.Both; // add 50 rows, 10 columns for (var r = 0; r < 50; r++) { theGrid.rows.push(new wjGrid.Row()); } for (var c = 0; c < 10; c++) { theGrid.columns.push(new wjGrid.Column()); } // populate the scrollable area for (var r = 0; r < theGrid.rows.length; r++) { for (var c = 0; c < theGrid.columns.length; c++) { theGrid.setCellData(r, c, 'r' + r + ',c' + c); } } // add 3 rows to the column header and 3 columns to the row header panels for (var i = 0; i < 3; i++) { theGrid.columnHeaders.rows.insert(0, new wjGrid.Row()); theGrid.rowHeaders.columns.insert(0, new wjGrid.Column()); } // populate the fixed area var p = theGrid.columnHeaders; for (var r = 0; r < p.rows.length; r++) { for (var c = 0; c < p.columns.length; c++) { p.setCellData(r, c, 'cHdr r' + r + ',c' + c); } } p = theGrid.rowHeaders; for (var r = 0; r < p.rows.length; r++) { for (var c = 0; c < p.columns.length; c++) { p.setCellData(r, c, 'rHdr r' + r + ',c' + c); } } p = theGrid.topLeftCells; for (var r = 0; r < p.rows.length; r++) { for (var c = 0; c < p.columns.length; c++) { p.setCellData(r, c, 'tl r' + r + ',c' + c); } } } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexGrid Unbound Grid</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: 400px; margin: 6px 0; } 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 * 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 { // references FlexGrid named 'flex' in the view @ViewChild('flex') flex: wjcGrid.FlexGrid; // DataSvc will be passed by derived classes constructor() { } ngAfterViewInit() { this._update(); } private _update() { if (this.flex) { this.flex.allowResizing = wjcGrid.AllowResizing.Both; this.flex.allowDragging = wjcGrid.AllowDragging.Both; let r: number, c: number, i: number; // add 50 rows, 10 columns for (r = 0; r < 50; r++) { this.flex.rows.push(new wjcGrid.Row()); } for (c = 0; c < 10; c++) { this.flex.columns.push(new wjcGrid.Column()); } // populate the scrollable area for (r = 0; r < this.flex.rows.length; r++) { for (c = 0; c < this.flex.columns.length; c++) { this.flex.setCellData(r, c, 'r' + r + ',c' + c); } } // add 3 rows to the column header and 3 columns to the row header panels for (i = 0; i < 3; i++) { this.flex.columnHeaders.rows.insert(0, new wjcGrid.Row()); this.flex.rowHeaders.columns.insert(0, new wjcGrid.Column()); } // populate the fixed area let p = this.flex.columnHeaders; for (r = 0; r < p.rows.length; r++) { for (c = 0; c < p.columns.length; c++) { p.setCellData(r, c, 'cHdr r' + r + ',c' + c); } } p = this.flex.rowHeaders; for (r = 0; r < p.rows.length; r++) { for (c = 0; c < p.columns.length; c++) { p.setCellData(r, c, 'rHdr r' + r + ',c' + c); } } p = this.flex.topLeftCells; for (r = 0; r < p.rows.length; r++) { for (c = 0; c < p.columns.length; c++) { p.setCellData(r, c, 'tl r' + r + ',c' + c); } } } } } // @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 Unbound Grid</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> </wj-flex-grid> </div> .wj-flexgrid { height: 400px; margin: 6px 0; } <template> <div class="container-fluid"> <wj-flex-grid :initialized="flexInitialized"></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"; import * as wjcCore from "@grapecity/wijmo"; let App = Vue.extend({ name: "app", methods: { flexInitialized: function(flex) { this.flex = flex; }, update: function() { if (this.flex) { this.flex.allowResizing = wjcGrid.AllowResizing.Both; this.flex.allowDragging = wjcGrid.AllowDragging.Both; let r, c, i; // add 50 rows, 10 columns for (r = 0; r < 50; r++) { this.flex.rows.push(new wjcGrid.Row()); } for (c = 0; c < 10; c++) { this.flex.columns.push(new wjcGrid.Column()); } // populate the scrollable area for (r = 0; r < this.flex.rows.length; r++) { for (c = 0; c < this.flex.columns.length; c++) { this.flex.setCellData(r, c, "r" + r + ",c" + c); } } // add 3 rows to the column header and 3 columns to the row header panels for (i = 0; i < 3; i++) { this.flex.columnHeaders.rows.insert(0, new wjcGrid.Row()); this.flex.rowHeaders.columns.insert( 0, new wjcGrid.Column() ); } // populate the fixed area let p = this.flex.columnHeaders; for (r = 0; r < p.rows.length; r++) { for (c = 0; c < p.columns.length; c++) { p.setCellData(r, c, "cHdr r" + r + ",c" + c); } } p = this.flex.rowHeaders; for (r = 0; r < p.rows.length; r++) { for (c = 0; c < p.columns.length; c++) { p.setCellData(r, c, "rHdr r" + r + ",c" + c); } } p = this.flex.topLeftCells; for (r = 0; r < p.rows.length; r++) { for (c = 0; c < p.columns.length; c++) { p.setCellData(r, c, "tl r" + r + ",c" + c); } } } } }, mounted: function() { this.update(); } }); new Vue({ render: h => h(App) }).$mount("#app"); </script> <style> .wj-flexgrid { height: 400px; margin: 6px 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'; import * as wjcGrid from "@grapecity/wijmo.grid"; class App extends React.Component { constructor(props) { super(props); } render() { return <div className="container-fluid"> <wjGrid.FlexGrid initialized={this.flexInitialized.bind(this)}> </wjGrid.FlexGrid> </div>; } flexInitialized(flex) { this.flex = flex; } update() { if (this.flex) { this.flex.allowResizing = wjcGrid.AllowResizing.Both; this.flex.allowDragging = wjcGrid.AllowDragging.Both; let r, c, i; // add 50 rows, 10 columns for (r = 0; r < 50; r++) { this.flex.rows.push(new wjcGrid.Row()); } for (c = 0; c < 10; c++) { this.flex.columns.push(new wjcGrid.Column()); } // populate the scrollable area for (r = 0; r < this.flex.rows.length; r++) { for (c = 0; c < this.flex.columns.length; c++) { this.flex.setCellData(r, c, "r" + r + ",c" + c); } } // add 3 rows to the column header and 3 columns to the row header panels for (i = 0; i < 3; i++) { this.flex.columnHeaders.rows.insert(0, new wjcGrid.Row()); this.flex.rowHeaders.columns.insert(0, new wjcGrid.Column()); } // populate the fixed area let p = this.flex.columnHeaders; for (r = 0; r < p.rows.length; r++) { for (c = 0; c < p.columns.length; c++) { p.setCellData(r, c, "cHdr r" + r + ",c" + c); } } p = this.flex.rowHeaders; for (r = 0; r < p.rows.length; r++) { for (c = 0; c < p.columns.length; c++) { p.setCellData(r, c, "rHdr r" + r + ",c" + c); } } p = this.flex.topLeftCells; for (r = 0; r < p.rows.length; r++) { for (c = 0; c < p.columns.length; c++) { p.setCellData(r, c, "tl r" + r + ",c" + c); } } } } componentDidMount() { this.update(); } } 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 Unbound Grid</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: 400px; margin: 6px 0; }