Editable TreeGrid

In This Topic

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

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

View code

EditableTreeGrid.razor	Copy 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>

EditableTreeGrid.razor

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