# Nested FlexGrids Using RowDetails

Learn how to create nested grid in this documentation topic

## Content

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:
```javascript
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;
    }
  });
```