Column Collections

The FlexGrid control has two sets of columns: Fixed Columns This collection contains the columns on the left of the grid; and Scrollable Columns This collection contains the main set of columns. Both column collections are ColumnCollection objects, which extend regular arrays. You may add or remove columns by adding or removing Column objects from these arrays.

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import { FlexGrid, Column } 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 column and auto-generated scrollable columns var theFirstGrid = new FlexGrid('#theFirstGrid'); theFirstGrid.rowHeaders.columns.push(new Column()); // extra fixed column theFirstGrid.itemsSource = data; // auto-generate scrollable columns // grid with no fixed columns and custom scrollable columns var theSecondGrid = new FlexGrid('#theSecondGrid'); theSecondGrid.rowHeaders.columns.splice(0, 1); // no extra columns theSecondGrid.autoGenerateColumns = false; // custom scrollable columns theSecondGrid.itemsSource = data; var cols = theSecondGrid.columns; cols.push(new Column({ binding: 'country', header: 'Country' })); cols.push(new Column({ binding: 'sales', header: 'Sales' })); cols.push(new Column({ binding: 'expenses', header: 'Expenses' })); } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexGrid Column 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="theFirstGrid"></div> <p> And this grid has no fixed columns and a custom set of scrollable columns:</p> <div id="theSecondGrid"></div> </div> </body> </html> .wj-flexgrid { height: 150px; margin: 10px 0; } .extra-col { background: rgb(255,255,125); } 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(); } firstGridInitial(grid: wjcGrid.FlexGrid) { grid.rowHeaders.columns.push(new wjcGrid.Column()); // extra fixed column } secondGridInitial(grid: wjcGrid.FlexGrid) { grid.rowHeaders.columns.splice(0, 1); // no extra columns } 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({ country: countries[i], 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 Column 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 #firstGrid (initialized)="firstGridInitial(firstGrid)" [(itemsSource)]="data"> </wj-flex-grid> <p> And this grid has no fixed columns and a custom set of scrollable columns:</p> <wj-flex-grid #secondGrid (initialized)="secondGridInitial(secondGrid)" [(itemsSource)]="data"> <wj-flex-grid-column [header]="'Country'" [binding]="'country'"></wj-flex-grid-column> <wj-flex-grid-column [header]="'Sales'" [binding]="'sales'"></wj-flex-grid-column> <wj-flex-grid-column [header]="'Expenses'" [binding]="'expenses'"></wj-flex-grid-column> </wj-flex-grid> </div> .wj-flexgrid { height: 150px; margin: 10px 0; } .extra-col { background: rgb(255,255,125); } <template> <div class="container-fluid"> <wj-flex-grid :initialized="firstGridInitial" :itemsSource="data"> </wj-flex-grid> <p> And this grid has no fixed columns and a custom set of scrollable columns:</p> <wj-flex-grid :initialized="secondGridInitial" :itemsSource="data"> <wj-flex-grid-column header="Country" binding="country"></wj-flex-grid-column> <wj-flex-grid-column header="Sales" binding="sales"></wj-flex-grid-column> <wj-flex-grid-column header="Expenses" binding="expenses"></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 * as wjcGrid from '@grapecity/wijmo.grid'; import { getData } from "./data"; new Vue({ el: "#app", data: function() { return { data: getData() }; }, methods:{ firstGridInitial(grid) { grid.rowHeaders.columns.push(new wjcGrid.Column()); // extra fixed column }, secondGridInitial(grid) { grid.rowHeaders.columns.splice(0, 1); // no extra columns } } }); </script> <style> .wj-flexgrid { height: 150px; margin: 10px 0; } .extra-col { background: rgb(255,255,125); } </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> export function 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({ country: countries[i], downloads: Math.round(Math.random() * 20000), sales: Math.random() * 10000, expenses: Math.random() * 5000 }); } return data; } 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'; import { getData } from './data'; class App extends React.Component { constructor(props) { super(props); this.state = { data: getData() }; } render() { return (<div className="container-fluid"> <wjGrid.FlexGrid initialized={this.firstGridInitial.bind(this)} itemsSource={this.state.data}/> <p> And this grid has no fixed columns and a custom set of scrollable columns: </p> <wjGrid.FlexGrid initialized={this.secondGridInitial.bind(this)} itemsSource={this.state.data}> <wjGrid.FlexGridColumn header="Country" binding="country"/> <wjGrid.FlexGridColumn header="Sales" binding="sales"/> <wjGrid.FlexGridColumn header="Expenses" binding="expenses"/> </wjGrid.FlexGrid> </div>); } firstGridInitial(grid) { grid.rowHeaders.columns.push(new wjcGrid.Column()); // extra fixed column } secondGridInitial(grid) { grid.rowHeaders.columns.splice(0, 1); // no extra columns } } 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 Column 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 id="app"></div> </body> </html> .wj-flexgrid { height: 150px; margin: 10px 0; } .extra-col { background: rgb(255,255,125); } export function 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({ country: countries[i], downloads: Math.round(Math.random() * 20000), sales: Math.random() * 10000, expenses: Math.random() * 5000 }); } return data; }