グリッド：入れ子グリッド

標準グリッドには簡単に収まらないほど多くの情報を含むデータオブジェクトに行が連結されることがあります。

このような場合は、wijmo.grid.detailモジュールに含まれているFlexGridDetailProviderクラスを使用することができます。

FlexGridDetailProviderはFlexGridを拡張して、行ヘッダーに折りたたみ/展開ボタンを追加するほか、項目に関する詳細情報を提供するために使用できるcreateDetailCellメソッドを追加します。詳細情報は「詳細行」に表示されます。詳細行は、詳細を展開したときにグリッドに追加され、折りたたんだときに削除されます。

詳細行には、別のグリッドなどの任意の要素を追加できます。次の例には同じカテゴリが表示されていますが、詳細行には別のグリッドを使用して商品が表示されます。

import * as wjOdata from '@mescius/wijmo.odata';
import * as wjGrid from '@mescius/wijmo.grid';
import * as wjGridDetail from '@mescius/wijmo.grid.detail';

// ODataのカテゴリと商品を取得します
var url = 'https://services.odata.org/Northwind/Northwind.svc';
var categories = new wjOdata.ODataCollectionView(url, 'Categories', {
    fields: ['CategoryID', 'CategoryName', 'Description']
})
var products = new wjOdata.ODataCollectionView(url, 'Products');

// 共有列の定義
var categoryColumns = [{
        binding: 'CategoryName',
        header: '分類名',
        width: '*'
    },
    {
        binding: 'Description',
        header: '説明',
        width: '2*'
    }
];

// 指定されたカテゴリの商品を取得します
function getProducts(categoryID) {
    var arr = [];
    products.items.forEach(function(product) {
        if (product.CategoryID == categoryID) {
            arr.push(product);
        }
    });
    return arr;
}

// グリッド詳細を含むグリッド
var gridDetail = new wjGrid.FlexGrid('#gridDetail', {
    autoGenerateColumns: false,
    columns: categoryColumns,
    itemsSource: categories,
    isReadOnly: true
});

// グリッド詳細のプロバイダ
var dpGrid = new wjGridDetail.FlexGridDetailProvider(gridDetail, {

    // 詳細の表示時にアニメーションを使用します
    isAnimated: true,

    // 詳細行の高さを制限します
    maxHeight: 150,

    // 指定された行の詳細セルを作成します
    createDetailCell: function(row) {
        var cell = document.createElement('div');
        var detailGrid = new wjGrid.FlexGrid(cell, {
            headersVisibility: wjGrid.HeadersVisibility.Column,
            isReadOnly: true,
            autoGenerateColumns: false,
            itemsSource: getProducts(row.dataItem.CategoryID),
            columns: [{
                    header: 'ID',
                    binding: 'ProductID'
                },
                {
                    header: '商品名',
                    binding: 'ProductName'
                },
                {
                    header: '梱包単位',
                    binding: 'QuantityPerUnit'
                },
                {
                    header: '単価',
                    binding: 'UnitPrice'
                },
                {
                    header: '生産中止',
                    binding: 'Discontinued'
                }
            ]
        });
        return cell;
    }
});

グリッド：入れ子グリッド