# Set the Tree Column

## Content

FlexGrid renders hierarchical data models as a TreeGrid when binding the `ChildItemsPath` property. By default, node expansion toggles and structural indentation render in the leading visible column.
The `TreeColumnIndex` 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;
}
```

**MVC View**
Configure the HTML Helper with `ChildItemsPath` and set `.TreeColumnIndex(1)`:

```auto
@(Html.C1().FlexGrid().Id("TreeGrid")
    .Bind(Model)
    .ChildItemsPath("Children")
    .IsReadOnly(true)
    .AutoGenerateColumns(false)
    .HeadersVisibility(HeadersVisibility.Column)
    .Columns(columns =>
    {
        columns.Add().Binding("Index").Header("#").Width("50").Align("center");
        columns.Add().Binding("Header").Header("Name").Width("*");
        columns.Add().Binding("Size").Header("Size").Width("100").Align("right");
        columns.Add().Binding("DateModified").Header("Date Modified").Width("160").Format("g");
    })
    .TreeColumnIndex(1)
    .CssStyle("height", "400px")
)
```