FlexGrid Client-side Data Binding

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:

import * as wjCore from '@mescius/wijmo';
import * as wjGrid from '@mescius/wijmo.grid';

// 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 wjGrid.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
});

The grid's collectionView property can be used to sort the data:

  // sort the data by country
var sd = new wjCore.SortDescription('country', true);
theGrid.collectionView.sortDescriptions.push(sd);