Editable TreeGrid

When you use FlexGrid's ChildItemsPath 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

To make the TreeGrid editable, use the following code. The example uses TreeItem.cs model which was added to the application in the TreeGrid topic:

Controller code

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

View code

@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>