Tree Grids

If your data items contain collections of child items, you may use FlexGrid's childItemsPath property 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':

Show as Tree:

Name

Albert

Anton

Annette

Benjamin

Bridget

Billy

Bernard

Bella

Bob

Charlie

Chris

Connie

Carrie

Douglas

Dinah

Donald

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':

name

hours

rate

Jack Smith

check1

hourly

overtime

bonus

check2

hourly

overtime

Jack Smith

check1

hourly

overtime

bonus

check2

hourly

overtime

Jane Smith

check1

hourly

overtime

bonus

check2

hourly

overtime

// This file locates: "Scripts/Lesson/C1FlexGrid/TreeGrids.js".
c1.documentReady(function () {
    // 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 = wijmo.Control.getControl('#familyGrid');
    familyGrid.headersVisibility = 'None';
    familyGrid.childItemsPath = 'children';
    familyGrid.itemsSource = family;
    familyGrid.columns[0].width = '*';
 
    // toggle family tree
    document.getElementById('asTree').addEventListener('click', function (e) {
        familyGrid.childItemsPath = e.target.checked ? 'children' : '';
    })
 
    // 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 = wijmo.Control.getControl('#workersGrid');
    workersGrid.headersVisibility = 'Column';
    workersGrid.childItemsPath = ['checks', 'earnings'];
    workersGrid.itemsSource = workers;
});

// This file locates: "Content/css/Lesson/C1FlexGrid/TreeGrids.css".
.wj-flexgrid {
  max-height: 220px; 
}
.wj-cell.wj-group {
  border: none;
}
.wj-cell.wj-group:not(.wj-state-selected):not(.wj-state-multi-selected) {
  background-color: white;
}

using System.Web.Mvc;
 
namespace LearnMvcClient.Controllers
{
    public partial class C1FlexGridController : Controller
    {
        // GET: TreeGrids
        public ActionResult TreeGrids()
        {
            return View();
        }
    }
}

<h1>
    @Html.Raw(Resources.C1FlexGrid.TreeGrids_Title)
</h1>
<p>
    @Html.Raw(Resources.C1FlexGrid.TreeGrids_Text1)
</p>
 
<p>
    @Html.Raw(Resources.C1FlexGrid.TreeGrids_Text2)
</p>
<p>
    @Html.Raw(Resources.C1FlexGrid.TreeGrids_Text3)
</p>
 
<label for="asTree">
    @Html.Raw(Resources.C1FlexGrid.TreeGrids_Text4)
    <input id="asTree" type="checkbox" checked="checked">
</label>
 
@Html.C1().FlexGrid().Id("familyGrid")
 
<p>
    @Html.Raw(Resources.C1FlexGrid.TreeGrids_Text5)
</p>
<p>
    @Html.Raw(Resources.C1FlexGrid.TreeGrids_Text6)
</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);
    })
)