TreeGrid Using childItemsPath

If your data items contain collections of child items, you may use the FlexGrid's childItemsPath to show the data as a tree.

For example, consider a list of 'person' objects which have a 'children' property. The 'children' property contains an array of more person objects. This is sometimes called a homogeneous hierarchy.

The grid below was built by binding the grid to the top-level persons list and setting the childItemsPath property to 'children':

import * as wjGrid from '@mescius/wijmo.grid';

// family tree data (homogeneous collection)
var family = [
    { name: 'Albert', children: [
        { name: 'Anton' },
        { name: 'Annette' },
    ]},
    { name: 'Benjamin', children: [
        { name: 'Bridget', children: [
        { name: 'Billy' },
        { name: 'Bernard' },
    ]},
        { name: 'Bella' },
        { name: 'Bob' },
    ]},
    { name: 'Charlie', children: [
        { name: 'Chris' },
        { name: 'Connie' },
        { name: 'Carrie' },
    ]},
    { name: 'Douglas', children: [
        { name: 'Dinah' },
        { name: 'Donald' }
    ]}
];
  
// family tree
var familyGrid = new wjGrid.FlexGrid('#familyGrid', {
    headersVisibility: 'None',
    childItemsPath: 'children',
    itemsSource: family
});

There are also 'heterogeneous' hierarchies, where items at different levels have different types and different child item properties.

For example, the grid below is bound to a collection of 'worker' objects which receive 'checks' which list 'earnings':

import * as wjGrid from '@mescius/wijmo.grid';

// workers tree data (heterogeneous collection)
var workers = [
{
    name: 'Jack Smith',
    checks: [{
      name: 'check1',
      earnings: [
      	{ name: 'hourly', hours: 30.0, rate: 15.0 },
        { name: 'overtime', hours: 10.0, rate: 20.0 },
        { name: 'bonus', hours: 5.0, rate: 30.0}
      ]
    }, {
      name: 'check2',
      earnings: [
      	{ name: 'hourly', hours: 20.0, rate: 18.0 },
        { name: 'overtime', hours: 20.0, rate: 24.0 }
      ]
    }]
  }, {
    name: 'Jack Smith',
    checks: [{
      name: 'check1',
      earnings: [
        { name: 'hourly', hours: 30.0, rate: 15.0 },
        { name: 'overtime', hours: 10.0, rate: 20.0 }, 
        { name: 'bonus', hours: 5.0, rate: 30.0 }
      ]
    }, {
      name: 'check2',
      earnings: [
        { name: 'hourly', hours: 20.0, rate: 18.0 },
        { name: 'overtime', hours: 20.0, rate: 24.0 }
      ]
    }]
  }, {
    name: 'Jane Smith',
    checks: [{
      name: 'check1',
      earnings: [
        { name: 'hourly', hours: 30.0, rate: 15.0 },
        { name: 'overtime', hours: 10.0, rate: 20.0 },
        { name: 'bonus', hours: 5.0, rate: 30.0 }
      ]
    }, {
      name: 'check2',
      earnings: [
        { name: 'hourly', hours: 20.0, rate: 18.0 },
        { name: 'overtime', hours: 20.0, rate: 24.0 }
      ]
    }]
  }];

// workers tree
var workersGrid = new wjGrid.FlexGrid('#workersGrid', {
    headersVisibility: 'Column',
    childItemsPath: ['checks','earnings'],
    autoGenerateColumns: false,
    columns: [
        { binding: 'name' },
        { binding: 'hours', dataType: 'Number' },
        { binding: 'rate', dataType: 'Number' }
    ],
    itemsSource: workers
});