# Editable TreeGrid

## Content



When you use FlexGrid's [ChildItemsPath](/componentone/api/mvc/online-mvc-core/dotnet-api/C1.AspNetCore.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/9b6a6cfe-b8e8-42e9-8a04-da6cb7762977/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-core/WorkingwithControls/FlexGrid/WorkwithFlexGrid/FlexGridTreeGrid) topic:

### Controller code

```razor
public IActionResult EditableTreeGrid()
{
    var list = Folder.Create(Directory.GetCurrentDirectory()).Children;
    return View(list);
}
```

### View code

```razor
@model IEnumerable<ITreeItem>
<c1-flex-grid id="grid" child-items-path="Children" auto-generate-columns="false" loaded-rows="setEditableRows" width="700" height="500px">
    <c1-items-source source-collection="@Model"></c1-items-source>
    <c1-flex-grid-column binding="Header" header="Header" width="*"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Size" header="Size" width="80" is-read-only="true"></c1-flex-grid-column>
</c1-flex-grid>
<script>
    function setEditableRows(s, e) {
        s.rows.forEach(function (row) {
            row.isReadOnly = false;
        });
    }
</script>
```