<h1>
    Tree Grids
</h1>
<p>
    If your data items contain collections of child items,
    you may use FlexGrid's <b>childItemsPath</b> property to
    show the data as a tree.
</p>

<p>
    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 <i>homogeneous</i>
    hierarchy.
</p>
<p>
    The grid below was built by binding the grid to
    the top-level persons list and setting the
    <b>childItemsPath</b> property to 'children':
</p>

<label for="asTree">
    Show as Tree:
    <input id="asTree" type="checkbox" checked="checked">
</label>

@Html.C1().FlexGrid().Id("familyGrid")

<p>
    There are also 'heterogeneous' hierarchies, where
    items at different levels have different types and
    different child item properties.
</p>
<p>
    For example, the grid below is bound to a collection
    of 'worker' objects which receive 'checks' which list
    'earnings':
</p>
@(Html.C1().FlexGrid().Id("workersGrid")
    .AutoGenerateColumns(false)
    .Columns(cs=>
    {
        cs.Add().Binding("name");
        cs.Add().Binding("hours").DataType(C1.Web.Mvc.Grid.DataType.Number);
        cs.Add().Binding("rate").DataType(C1.Web.Mvc.Grid.DataType.Number);
    })
)