グリッド：クライアント側データへの連結

グリッドのitemsSourceプロパティに標準JavaScript配列を設定すると、CollectionViewをユーザー自身が作成しなくても、自動的に内部CollectionViewが作成されてデータソースとして使用され、ソート機能や編集機能が提供されます。

この内部ビューは、グリッドのcollectionViewプロパティとして公開され、ユーザー自身が追加機能を必要とする場合に使用できます。

たとえば、次のグリッドは標準の配列に連結されます。

// ランダムデータを作成します
var countries = 'アメリカ,ドイツ,イギリス,日本,イタリア,ギリシャ'.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
    });
}

// グリッドを生データに連結します
var theGrid = new wijmo.grid.FlexGrid('#theGrid', {
    allowSorting: false,
    showSort: false,
    autoGenerateColumns: false,
    columns: [
        { binding: 'country', header: '国', width: '2*'},
        { binding: 'sales', header: '売上', width: '*', format: 'n2'},
        { binding: 'expenses', header: '費用', width: '*', format: 'n2'}
    ],
    itemsSource: data
});

グリッドのcollectionViewプロパティを使用して、データをソートできます。

// データを国別にソートします
var sd = new wjCore.SortDescription('country', true);
theGrid.collectionView.sortDescriptions.push(sd);