Nested FlexGrids Using RowDetails

Sometimes rows are bound to data objects that contain more information than would fit easily on a regular grid.

In these scenarios, you may want to use the FlexGridDetailProvider class that is included with the wijmo.grid.detail module.

The FlexGridDetailProvider extends the FlexGrid by adding collapse/expand buttons to row headers, and a createDetailCell method you can use to provide additional details about an item. The detail information is shown in a 'detail row' added to the grid when the details are expanded, and removed when they are collapsed.

You can add anything you want to the detail rows, including other grids. This example shows the same categories, but the detail row uses another grid to show the products:

import * as wjOdata from '@mescius/wijmo.odata';
import * as wjGrid from '@mescius/wijmo.grid';
import * as wjGridDetail from '@mescius/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;
    }
  });