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

When you use FlexGrid's [ChildItemsPath](/componentone/api/mvc/online-mvc/dotnet-framework-api/C1.Web.Mvc/C1.Web.Mvc.FlexGridBase-1.ChildItemsPath.html) to show the data as a tree, the resulting grid will be read-only by default. This happens because every row in a tree is a GroupRow, and group rows are read-only by default. However, you can make the tree editable by handling the OnClientLoadedRows event to set the **isReadOnly** property of every row to **false**.

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

To make the TreeGrid editable, use 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 EditableTreeGrid()
{
    var list = Folder.Create(Server.MapPath("~")).Children;
    return View(list);
}
```

### View code

```razor
@model IEnumerable<ITreeItem>
@(Html.C1().FlexGrid().Id("grid").Width(500).Height(500)
    .Bind(Model)
    .ChildItemsPath("Children")
    .AutoGenerateColumns(false)
    .Columns(columns =>
    {
        columns.Add().Binding("Header").Width("*");
        columns.Add().Binding("Size").Width("80").IsReadOnly(true).Align("center");
    })
    .OnClientLoadedRows("setEditableRows")
)
<script>
    function setEditableRows(s, e) {
        s.rows.forEach(function (row) {
            row.isReadOnly = false;
        });
    }
</script>
```