FlexGrid

FlexGrid

Child Items

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

Features

Sample SourceDocumentation

Albert

Anton

Annette

Benjamin

Bridget

Billy

Bernard

Bella

Bob

Charlie

Chris

Connie

Carrie

Douglas

Dinah

Show as Tree

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

Bill Smith

check1

hourly

overtime

bonus

Jack Smith

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

ChildItemsController.cs ChildItems.cshtml

using Microsoft.AspNetCore.Mvc; 
  
namespace MvcExplorer.Controllers 
{ 
    public partial class FlexGridController : Controller 
    { 
        public ActionResult ChildItems() 
        { 
            return View(); 
        } 
    } 
} 

@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) 
}

New Controls >

Popular Controls >

Data Management >

Data Visualization >

Navigation and Layout >

Document >

Scheduling >

Input and Editing >

Tutorials >

New Features >

Getting Started Guides >

Sample Applications >

Data Management

Data Visualization

Navigation and Layout

Document

Scheduling

Input and Editing

Tutorials

New Features

Getting Started Guides

Sample Applications

Child Items

Features

Description