Arrays and CollectionViews

When you set the grid's itemsSource property to a regular JavaScript array, it automatically creates an internal CollectionView and uses that as a data source so it can provide sorting and editing features without forcing you to create a CollectionView yourself. This internal view is exposed by the grid's collectionView property, and you can use it to in case you need the extra functionality yourself. For example, the grid below is bound to a regular array, and the grid's collectionView property is used to show the currently selected item.

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import { SortDescription, format } from '@grapecity/wijmo'; import { FlexGrid } from '@grapecity/wijmo.grid'; document.readyState === 'complete' ? init() : window.onload = init; function init() { // create some random data var countries = 'US,Germany,UK,Japan,Italy,Greece'.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 }); } // bind a grid to the raw data var theGrid = new FlexGrid('#theGrid', { allowSorting: false, showSort: false, autoGenerateColumns: false, columns: [ { binding: 'country', header: 'Country', width: '2*' }, { binding: 'sales', header: 'Sales', width: '*', format: 'n2' }, { binding: 'expenses', header: 'Expenses', width: '*', format: 'n2' } ], itemsSource: data }); // show the current item var selItemElement = document.getElementById('selectedItem'); function updateCurrentInfo() { selItemElement.innerHTML = format('Country: <b>{country}</b>, Sales: <b>{sales:c0}</b> Expenses: <b>{expenses:c0}</b>', theGrid.collectionView.currentItem); } // update current item now and when the grid selection changes updateCurrentInfo(); theGrid.collectionView.currentChanged.addHandler(updateCurrentInfo); // sort the data by country var sd = new SortDescription('country', true); theGrid.collectionView.sortDescriptions.push(sd); } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexGrid Arrays and CollectionViews Binding</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"> <p id="selectedItem"></p> <div id="theGrid"></div> </div> </body> </html> 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 wjcCore from '@grapecity/wijmo'; 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[]; selectedItem: string; // references FlexGrid named 'flex' in the view @ViewChild('flex') flex: wjcGrid.FlexGrid; // DataSvc will be passed by derived classes constructor() { this.data = this._getData(); } flexInitialized(flexgrid: wjcGrid.FlexGrid) { // sort the data by country let sd = new wjcCore.SortDescription('country', true); flexgrid.collectionView.sortDescriptions.push(sd); flexgrid.collectionView.currentChanged.addHandler(this._updateCurrentInfo.bind(this)); this._updateCurrentInfo(); } private _getData() { // create 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], sales: Math.random() * 10000, expenses: Math.random() * 5000 }); } return data; } private _updateCurrentInfo() { this.selectedItem = wjcCore.format( 'Country: <b>{country}</b>, Sales: <b>{sales:c0}</b> Expenses: <b>{expenses:c0}</b>', this.flex.collectionView.currentItem); } } // @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 Arrays and CollectionViews Binding</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"> <p [innerHTML]="selectedItem"></p> <!-- the grid --> <wj-flex-grid #flex [(itemsSource)]="data" (initialized)="flexInitialized(flex)"> <wj-flex-grid-column [header]="'Country'" [binding]="'country'" width="2*"></wj-flex-grid-column> <wj-flex-grid-column [header]="'Sales'" [binding]="'sales'" width="*" format="n2"></wj-flex-grid-column> <wj-flex-grid-column [header]="'Expenses'" [binding]="'expenses'" width="*" format="n2"></wj-flex-grid-column> </wj-flex-grid> </div> .wj-flexgrid { height: 400px; margin: 6px 0; } <template> <div class="container-fluid"> <p v-html="selectedItem"></p> <!-- the grid --> <wj-flex-grid :itemsSource="data" :initialized="flexInitialized"> <wj-flex-grid-column :header="'Country'" :binding="'country'" width="2*"></wj-flex-grid-column> <wj-flex-grid-column :header="'Sales'" :binding="'sales'" width="*" format="n2"></wj-flex-grid-column> <wj-flex-grid-column :header="'Expenses'" :binding="'expenses'" width="*" format="n2"></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 wjcCore from "@grapecity/wijmo"; let App = Vue.extend({ name: "app", data: function() { return { data: this._getData(), selectedItem: "" }; }, methods: { flexInitialized: function(flexgrid) { this.flex = flexgrid; // sort the data by country let sd = new wjcCore.SortDescription("country", true); flexgrid.collectionView.sortDescriptions.push(sd); flexgrid.collectionView.currentChanged.addHandler( this._updateCurrentInfo.bind(this) ); this._updateCurrentInfo(); }, _getData: function() { // create 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], sales: Math.random() * 10000, expenses: Math.random() * 5000 }); } return data; }, _updateCurrentInfo: function() { this.selectedItem = wjcCore.format( "Country: <b>{country}</b>, Sales: <b>{sales:c0}</b> Expenses: <b>{expenses:c0}</b>", this.flex.collectionView.currentItem ); } } }); 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 wjcCore from "@grapecity/wijmo"; class App extends React.Component { constructor(props) { super(props); this.state = { data: this.getData(), selectedItem: "" }; } render() { return <div className="container-fluid"> <p dangerouslySetInnerHTML={{ __html: this.state.selectedItem }}/> <wjGrid.FlexGrid initialized={this.flexInitialized.bind(this)} itemsSource={this.state.data}> <wjGrid.FlexGridColumn header="Country" binding="country" width="2*"></wjGrid.FlexGridColumn> <wjGrid.FlexGridColumn header="Sales" binding="sales" width="*" format="n2"></wjGrid.FlexGridColumn> <wjGrid.FlexGridColumn header="Expenses" binding="expenses" width="*" format="n2"></wjGrid.FlexGridColumn> </wjGrid.FlexGrid> </div>; } flexInitialized(flexgrid) { this.flex = flexgrid; // sort the data by country let sd = new wjcCore.SortDescription("country", true); flexgrid.collectionView.sortDescriptions.push(sd); flexgrid.collectionView.currentChanged.addHandler(this.updateCurrentInfo.bind(this)); this.updateCurrentInfo(); } updateCurrentInfo() { this.setState({ selectedItem: wjcCore.format("Country: <b>{country}</b>, Sales: <b>{sales:c0}</b> Expenses: <b>{expenses:c0}</b>", this.flex.collectionView.currentItem) }); } getData() { // create 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], 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 Data Binding Basic</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; }