RowDetails을 사용한 중첩된 FlexGrids

때때로 행은 쉽게 들어갈 수 있는 일반 그리드보다 더 많은 정보를 포함하는 데이터 객체에 바인딩됩니다.

이러한 시나리오에서는 wijmo.grid.detail 모듈에 포함된 FlexGridDetailProvider 클래스를 사용할 수 있습니다.

FlexGrid Detail Provider는 행 헤더에 축소/확장 버튼을 추가하고, 아이템의 추가 세부 정보를 제공하는데 사용할 수 있는 createDetailCell 메서드를 추가하여 FlexGrid를 확장합니다. 상세 정보가 확장될 때 그리드에 추가된 '상세 행(detail row)'에 표시되고, 축소될 때 제거됩니다.

다른 그리드를 포함하여 상세 행(detail rows)에 원하는 것을 추가할 수 있습니다. 이 예시에서는 동일한 카테고리를 보여주지만 상세 행(detail row)은 다른 그리드를 사용하여 제품을 표시합니다.

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

// get OData categories and products
  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');

  // shared column definitions
  var categoryColumns = [{
      binding: 'CategoryName',
      header: 'Category Name',
      width: '*'
    },
    {
      binding: 'Description',
      header: 'Description',
      width: '2*'
    }
  ];

  // get products for a given category
  function getProducts(categoryID) {
    var arr = [];
    products.items.forEach(function(product) {
      if (product.CategoryID == categoryID) {
        arr.push(product);
      }
    });
    return arr;
  }

    // grid with grid detail
  var gridDetail = new wjGrid.FlexGrid('#gridDetail', {
    autoGenerateColumns: false,
    columns: categoryColumns,
    itemsSource: categories,
    isReadOnly: true
  });

  // grid detail provider
  var dpGrid = new wjGridDetail.FlexGridDetailProvider(gridDetail, {

    // use animation when showing details
    isAnimated: true,

    // limit height of detail rows
    maxHeight: 150,

    // create detail cells for a given row
    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: 'Name',
            binding: 'ProductName'
          },
          {
            header: 'Qty/Unit',
            binding: 'QuantityPerUnit'
          },
          {
            header: 'Unit Price',
            binding: 'UnitPrice'
          },
          {
            header: 'Discontinued',
            binding: 'Discontinued'
          }
        ]
      });
      return cell;
    }
  });