# TreeGrid

## Content

FlexGrid supports hierarchical data, that is items that have lists of sub items. To use FlexGrid as a TreeGrid with hierarchical data sources, set the [ChildItemsPath](/componentone/api/mvc/online-mvc-core/dotnet-api/C1.AspNetCore.Mvc/C1.Web.Mvc.FlexGridBase-1.ChildItemsPath.html) property to the name of the data element that contains the child elements. The FlexGrid automatically scans the data and builds the tree.

The example below uses a sample folder structure of ASP.NET MVC Edition project. You can display the tree view structure of any folder by providing its path in the [ChildItemsPath](/componentone/api/mvc/online-mvc-core/dotnet-api/C1.AspNetCore.Mvc/C1.Web.Mvc.FlexGridBase-1.ChildItemsPath.html) property.

The following image shows how the FlexGrid appears after setting the **ChildItemsPath** property.

![](https://cdn.mescius.io/document-site-files/images/9b6a6cfe-b8e8-42e9-8a04-da6cb7762977/images/flexgridtreeview.png)

The following code examples demonstrate how to enable TreeGrid in the FlexGrid:

## Add a Model

1. Add a new class to the folder **Models** (for example: `TreeItem.cs`). See [Adding controls](/componentone/docs/mvc/online-mvc-core/Adding-Controls) to know how to add a new model.
2. Add the following code to the new model to define the tree view structure of a sample folder.

|  | @cols=2:Colorized Example Code From File |
| --- | -------------------------------- | -------------------------------- |
|

```csharp

    
        Code from File
        Your code content will appear in this box in Preview or when the help system is built
        File Name (full path and filename or path and filename relative to project):
        PROJECTS\TreeGrid\TreeGrid\Models\TreeItem.cs
        Leave the Region field below blank if you want to use the whole file. See the Widget Content from a File Topic in the online help for more info on marking named sections in example code files.
        Region:
        treeitem
    
```

Type your example code here. It will be automatically colorized when you switch to Preview or build the help system.

## Add a Controller and a View

**Controller code**

```csharp
public IActionResult Index()
{
    var list = Folder.Create(Directory.GetCurrentDirectory()).Children;
    return View(list);
}
```

**View code**

```html
@using TreeGrid.Models
@model IEnumerable<TreeItem>
<style>
    .wj-flexgrid {
        height: 400px;
        background-color: white;
        box-shadow: 4px 4px 10px 0px rgba(50, 50, 50, 0.75);
        margin-bottom: 12px;
    }
    .custom-flex-grid .wj-header.wj-cell {
        color: #fff;
        background-color: #000;
        border-bottom: solid 1px #404040;
        border-right: solid 1px #404040;
        font-weight: bold;
    }
    .custom-flex-grid .wj-cell {
        background-color: #fff;
        border: none;
    }
    .custom-flex-grid .wj-alt:not(.wj-state-selected):not(.wj-state-multi-selected) {
        background-color: #fff;
    }
    .custom-flex-grid .wj-state-selected {
        background: #000;
        color: #fff;
    }
    .custom-flex-grid .wj-state-multi-selected {
        background: #222;
        color: #fff;
    }
</style>
<script>
    c1.documentReady(function () {
        wijmo.Control.getControl("#grid").rows.defaultSize = 25;
    });
</script>
<c1-flex-grid id="grid" class="custom-flex-grid" width="500px"
              child-items-path="Children" auto-generate-columns="false"
              allow-resizing="None" headers-visibility="None" selection-mode="ListBox">
    <c1-items-source source-collection="@Model"></c1-items-source>
    <c1-flex-grid-column binding="Header" width="*"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Size" width="80" align="center"></c1-flex-grid-column>
</c1-flex-grid>
```