# TreeGrid

Develop powerful and lightweight web applications using ASP.NET MVC controls. Learn more about the ComponentOne MVC controls in ASP.NET MVC documentation.

## Content



FlexGrid supports hierarchical data, that is items that have lists of sub items. To use FlexGrid as a Tree-view with hierarchical data sources, set the [ChildItemsPath](/componentone/api/mvc/online-mvc/dotnet-framework-api/C1.Web.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/dotnet-framework-api/C1.Web.Mvc/C1.Web.Mvc.FlexGridBase-1.ChildItemsPath.html) property.

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

![MVC FlexGrid TreeGrid](https://cdn.mescius.io/document-site-files/images/2b3ac322-100e-4637-958d-fb40dcda3f44/images/flexgridtreeview.png)

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

### Add a Model

2.  Add a new class to the folder **Models** (for example: `TreeItem.cs`). See [Adding controls](/componentone/docs/mvc/online-mvc/addingcontrols#step2) to know how to add a new model.
3.  Add the following code to the new model to define the tree view structure of a sample folder.
    
    ```csharp
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    namespace MVCFlexGrid.Models
    {
        public interface ITreeItem
        {
            string Header { get; set; }
            IList<ITreeItem> Children { get; }
        }
        public class Folder : ITreeItem
        {
            public string Header { get; set; }
            public IList<ITreeItem> Children { get; private set; }
            public Folder(string name)
            {
                Header = name;
                Children = new List<ITreeItem>();
            }
            public static Folder Create(string path)
            {
                var folder = new Folder(System.IO.Path.GetFileName(path));
                System.IO.Directory.GetDirectories(path).ToList().ForEach(d => folder.Children.Add(Folder.Create(d)));
                System.IO.Directory.GetFiles(path).ToList().ForEach(f => folder.Children.Add(File.Create(f)));
                return folder;
            }
        }
        public class File : ITreeItem
        {
            public string Header { get; set; }
            public DateTime DateModified { get; set; }
            public long Size { get; set; }
            public IList<ITreeItem> Children { get { return null; } }
            public File(string name)
            {
                Header = name;
            }
            public static File Create(string path)
            {
                var file = new File(System.IO.Path.GetFileName(path));
                var info = new System.IO.FileInfo(path);
                file.DateModified = info.LastWriteTime;
                file.Size = info.Length;
                return file;
            }
        }
    }
    ```
    

### Add a controller and a view

**TreeViewController.cs**

```csharp
public ActionResult TreeView()
{
    var list = MVCFlexGrid.Models.Folder.Create(Server.MapPath("~")).Children;
    return View(list);
}
```

**TreeView.cshtml**

```razor
@using C1.Web.Mvc.Grid
@model IEnumerable<MVCFlexGrid.Models.ITreeItem>
<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>
@(Html.C1().FlexGrid().CssClass("custom-flex-grid")
    .Bind(Model)
    .Width(600)
    .ChildItemsPath("Children")
    .AutoGenerateColumns(false)
    .Columns(columns =>
    {
        columns.Add().Binding("Header").Width("*");
        columns.Add().Binding("Size").Width("80").Align("center");
    })
    .AllowResizing(AllowResizing.None)
    .HeadersVisibility(HeadersVisibility.None)
    .SelectionMode(SelectionMode.ListBox)
)
```

## See Also

**Reference**

[AllowResizing Property](/componentone/api/mvc/online-mvc/dotnet-framework-api/C1.Web.Mvc/C1.Web.Mvc.FlexGridBase-1.AllowResizing.html)

[ChildItemsPath Property](/componentone/api/mvc/online-mvc/dotnet-framework-api/C1.Web.Mvc/C1.Web.Mvc.FlexGridBase-1.ChildItemsPath.html)

[HeadersVisibility Property](/componentone/api/mvc/online-mvc/dotnet-framework-api/C1.Web.Mvc/C1.Web.Mvc.FlexGridBase-1.HeadersVisibility.html)

[FlexGridBase\<T> Class](/componentone/api/mvc/online-mvc/dotnet-framework-api/C1.Web.Mvc/C1.Web.Mvc.FlexGridBase-1.html)