# Set the Tree Column

## Content

FlexGrid renders hierarchical data models as a TreeGrid when binding the [ChildItemsPath](/componentone/api/mvc/online-mvc-core/dotnet-api/C1.AspNetCore.Mvc/C1.Web.Mvc.TreeView.ChildItemsPath.html) property. By default, node expansion toggles and structural indentation render in the leading visible column.
The [TreeColumnIndex](/componentone/api/mvc/online-mvc-core/dotnet-api/C1.AspNetCore.Mvc/C1.Web.Mvc.FlexGridBase-1.TreeColumnIndex.html) property specifies the zero-based index of the target column designated to host these hierarchy indicators.

***

### Index Configuration

| Index Setting | Indicator Placement & Behavior |
| ------------- | ------------------------------ |
| **-1** *(Default)* | Allocates expansion toggles and level indentation to the first visible column in the viewport. |
| **0** | Explicitly binds hierarchy indicators to column index 0. Produces the same visual result as `-1` unless column 0 is hidden (`Visible = false`). |
| **1 or greater** | Shifts node glyphs and structural indentation to the column at the specified zero-based index. Descendant items remain indented relative to their parent row. |

The following examples configure a file-system hierarchy, shifting the tree indicators from the leading `#` row-index column (Index 0) to the **Name** column (Index 1).
![C1Web FlexGrid - TreeGrid Behaviour to different Tree Column Index.](https://cdn.mescius.io/document-site-files/images/2b3ac322-100e-4637-958d-fb40dcda3f44/treeColumnIndex%20GIF-20261007.892fdf.gif)

***

## Code Snippet

The following examples display the tree outline in the first visible column.
**Controllers**
The controller action constructs the hierarchical folder model, numbers of items sequentially using depth-first traversal, and passes the collection to the view:

```auto
public ActionResult Index()
{
    var items = Folder.Create(Server.MapPath("~")).Children;
    NumberTreeItems(items, 1);
    return View(items);
}
// Numbers the items depth first, so the "#" column follows the order the
// rows appear in when the tree is fully expanded.
private static int NumberTreeItems(IList<ITreeItem> items, int next)
{
    foreach (var item in items)
    {
        item.Index = next++;
        if (item.Children != null)
        {
            next = NumberTreeItems(item.Children, next);
        }
    }
    return next;
}
```

**[ASP.NET](http://asp.net/ "http://asp.net/") Core View**
In [ASP.NET](http://asp.net/ "http://asp.net/") Core, declare the `tree-column-index` attribute on the `<c1-flex-grid>` tag helper:

```auto
<c1-flex-grid id="TreeGrid" child-items-path="Children" is-read-only="true"
              auto-generate-columns="false" headers-visibility="Column"
              tree-column-index="1" style="height:400px">
    <c1-items-source source-collection="@Model"></c1-items-source>
    <c1-flex-grid-column binding="Index" header="#" width="50" align="center"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Header" header="Name" width="*"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Size" header="Size" width="100" align="right"></c1-flex-grid-column>
    <c1-flex-grid-column binding="DateModified" header="Date Modified" width="160" format="g"></c1-flex-grid-column>
</c1-flex-grid>
```