FlexGrid
Child Items
Features
Sample
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':
Description
If your data items contain collections of child items, you may use 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'.
Source
ChildItemsController.cs
using Microsoft.AspNetCore.Mvc; namespace MvcExplorer.Controllers { public partial class FlexGridController : Controller { public ActionResult ChildItems() { return View(); } } }
ChildItems.cshtml
@model IEnumerable<ITreeItem> @{ ChildItems items = new ChildItems(); var Parents = items.Parents; var Workers = items.Workers; } @section Styles{ <style> .custom-flex-grid { height: 400px; background-color: white; box-shadow: 4px 4px 10px 0px rgba(50, 50, 50, 0.75); margin-bottom: 12px; } .custom-flex-grid .wj-cell { background-color: #fff; border: none; font-size: 10pt; } .custom-flex-grid .wj-state-selected { background: #000; color: #fff; } .custom-flex-grid .wj-state-multi-selected { background: #222; color: #fff; } .wj-flexgrid { max-height: 220px; margin: 6px 0; } .wj-cell.wj-group { border: none; } .wj-cell.wj-group:not(.wj-state-selected):not(.wj-state-multi-selected) { background-color: white; } custom-flex-grid-worker { height: 400px; background-color: white; box-shadow: 4px 4px 10px 0px rgba(50, 50, 50, 0.75); margin-bottom: 12px; } .custom-flex-grid-worker .wj-cell { background-color: #fff; border-bottom: none; font-size: 10pt; } .custom-flex-grid-worker .wj-state-selected { background: #000; color: #fff; } .custom-flex-grid-worker .wj-state-multi-selected { background: #222; color: #fff; } .custom-flex-grid-worker .wj-header { background-color: #d0cccc; font-size: 10pt; } </style> } @section Scripts{ <script> c1.documentReady(function () { var family = wijmo.Control.getControl("#homogenous"); var worker = wijmo.Control.getControl("#heterogeneous"); worker.childItemsPath = ["checks", "earning"]; // toggle family tree document.getElementById('asTree').addEventListener('click', function (e) { family.childItemsPath = e.target.checked ? 'children' : ''; }); }); </script> } <c1-flex-grid id="homogenous" class="custom-flex-grid" width="500px" child-items-path="children" auto-generate-columns="false" headers-visibility="None" selection-mode="Row"> <c1-items-source source-collection="Parents"></c1-items-source> <c1-flex-grid-column binding="name" width="*"></c1-flex-grid-column> </c1-flex-grid> <div class="checkbox"> <label for="asTree"> <input id="asTree" type="checkbox" checked="checked"> @Html.Raw(FlexGridRes.TreeGrid_ChildItems_Text) </label> </div> <p> @Html.Raw(FlexGridRes.TreeGrid_ChildItems_Text1) </p> <p> @Html.Raw(FlexGridRes.TreeGrid_ChildItems_Text2) </p> <c1-flex-grid id="heterogeneous" class="custom-flex-grid-worker" width="500px" auto-generate-columns="false" headers-visibility="Column" selection-mode="Row"> <c1-items-source source-collection="Workers"></c1-items-source> <c1-flex-grid-column binding="name" width="*"></c1-flex-grid-column> <c1-flex-grid-column binding="hours" width="80" align="center"></c1-flex-grid-column> <c1-flex-grid-column binding="rate" width="80" align="center"></c1-flex-grid-column> </c1-flex-grid> @section Description { @Html.Raw(FlexGridRes.TreeGrid_ChildItems_Description) }
Documentation