グリッド：サーバー側データへの連結

データがサーバー上にある場合は、httpRequestメソッドを使用してデータを取得できます。サーバーから応答を取得したら、CollectionViewのsourceCollection配列に応答値を設定するか、sourceCollection配列に新しいデータを付加します。このCollectionViewにFlexGrid（または任意のコントロール）を連結すると、FlexGridにsourceCollectionのデータや変更内容を表示できます。

// 空のCollectionViewを作成し、新しいFlexGridを連結します
var serverView = new wijmo.collections.CollectionView();
var theGrid = new wijmo.grid.FlexGrid('#theGrid', {
    allowSorting: false,
    showSort: false,
    isReadOnly: true,
    itemsSource: serverView
});

// サーバーのデータを入力します
var url = 'https://services.odata.org/Northwind/Northwind.svc/Categories';
var params = {
    $format: 'json',
    $select: 'CategoryID,CategoryName,Description'
};
wijmo.httpRequest(url, {
    data: params,
    success: function(xhr) {

        // データを取得し、CollectionViewに割り当てます
        var response = JSON.parse(xhr.response);
        var data = response.d ? response.d.results : response.value;

        // 結果をsourceCollectionとして使用します
        serverView.sourceCollection = data;

        // 結果をsourceCollectionに付加します
        // データを分けてロードする場合
        //serverView.deferUpdate(function () {
        //    data.forEach(function(item) {
        //        serverView.sourceCollection.push(item);
        //    });
        //});
    }
});

使用しているデータサービスのAPIがフィルタ処理、ソート、ページングなどのコマンドをサポートする場合は、httpRequest呼び出しにパラメータを追加して、これらの機能を使用できます。CollectionViewを拡張するカスタムクラスにサーバーAPIをカプセル化することもできます。

サーバーベースのカスタムCollectionViewクラスの簡単な例については、ServerCollectionViewのサンプルを参照してください。

CRUD操作をすべてサポートする完全な例については、BreezeとODataのサンプルを参照するか、ODataCollectionViewクラスのソースコードを確認してください。