# Unbound 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

As the name suggests, in unbound mode, grid is not bound to any data source and data is stored in the control itself. In this case, you can build trees by adding rows and columns in code.

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

To work in unbound mode, you need to start with a data source in an array, initialize the FlexGrid without binding it to the array, add columns and define properties, loop through the arrays and add group rows and cells as shown in the following code. The example uses **TreeItem.cs** model which was added to the application in the [TreeGrid](/componentone/docs/mvc/online-mvc/workwithcontrols/FlexGrid/workwithflexgrid/FlexGridTreeView#add-a-model) topic:

### Controller code

```razor
public ActionResult UnboundTree()
{
    var list = Folder.Create(Server.MapPath("~")).Children;
    return View(list);
}
```

### View code

```razor
@model IEnumerable<ITreeItem>
@(Html.C1().FlexGrid().Id("ubgrid").Width(500).Height(500)
    .AutoGenerateColumns(false)    
)
<script>
    c1.documentReady(function () {
        let grid = wijmo.Control.getControl("#ubgrid");
        grid.rows.defaultSize = 25;
        // add columns
        grid.columns.push(new wijmo.grid.Column({ header: 'Header', width: '2*' }));
        grid.columns.push(new wijmo.grid.Column({ header: 'Size' }));
        let data = @(Html.Raw(Json.Encode(Model)));
        // add rows
        for (let r = 0; r < data.length; r++) {
            // add header
            var header = data[r];
            var row = new wijmo.grid.GroupRow();
            row.dataItem = header;
            row.isReadOnly = false;
            row.level = 0;
            grid.rows.push(row);
            grid.setCellData(row.index, 0, header.Header);
            if (header.Children) {
                addChild(grid, header, 1);
            }
        }
    });
    function addChild(grid, parent, level) {
        for (var c = 0; c < parent.Children.length; c++) {
            // add children
            var child = parent.Children[c];
            row = new wijmo.grid.GroupRow();
            row.dataItem = child;
            row.isReadOnly = false;
            row.level = level;
            grid.rows.push(row);
            grid.setCellData(row.index, 0, child.Header);
            grid.setCellData(row.index, 1, child.Size);
            if (child.Children) {
                addChild(grid, child, level + 1);
            }
        }
    }
</script>
```