Wijmo 5 - FlexGrid and Hierarchical Data

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://cdn.wijmo.com/5.20152.90/controls/wijmo.min.js"></script>
<script src="http://cdn.wijmo.com/5.20152.90/controls/wijmo.grid.min.js"></script>
<link rel="stylesheet" href="http://cdn.wijmo.com/5.20152.90/styles/wijmo.min.css">
<h1>FlexGrid and Hierarchical Data</h1>

<p>
    Many applications have data that is represented by items with similar properties
    and hierarchical structure. For example, folders may contain files and other folders,
    people may have children that have children of their own, products may be composed
    of primary components and other products, etc.</p>
<p>
    The <b>FlexGrid</b> has a <b>childItemsPath</b> property that makes it easy to deal
    with this type of data. Collapsible rows represent top-level items that contain 
    child rows down to any depth. The sample below demonstrates.</p>
        
<div id="thegrid" />

CSS

.wj-flexgrid {
    margin: 12px;
}

JavaScript

onload = function() {
    
    var data = [
		{ name: 'car', price: 25445, qty: 1, items: [
        	{ name: 'wheel', price: 342, qty: 4 },
            { name: 'engine', price: 1342, qty: 1, items: [
                { name: 'valve', price: 83, qty: 24 },
                { name: 'piston', price: 42, qty: 4 },
			] },                
            { name: 'seat', price: 542, qty: 4 },
            { name: 'chassis', price: 4342, qty: 1 }
		] },
        { name: 'motorcycle', price: 7543, qty: 1, items: [
			{ name: 'wheel', price: 242, qty: 2 },
            { name: 'engine', price: 842, qty: 1, items: [
                { name: 'valve', price: 32, qty: 8 },
                { name: 'piston', price: 42, qty: 2 },
            ] },                
            { name: 'seat', price: 142, qty: 1 },
            { name: 'chassis', price: 742, qty: 1 }
		] },
        { name: 'bicycle', price: 543, qty: 1, items: [
        	{ name: 'wheel', price: 142, qty: 2 },
            { name: 'seat', price: 62, qty: 1 },
            { name: 'chassis', price: 4342, qty: 1 }
		] }
	];

    // create grid, bind it to hierarchical data
	var grid = new wijmo.grid.FlexGrid('#thegrid', {
        headersVisibility: 'Column',
        itemsSource: data,
        childItemsPath: 'items'
    });
    
    // start collapsed
    grid.collapseGroupsToLevel(0);
    
}