編集可能な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

EditableTreeGridController.cshtml	コードのコピー
public ActionResult EditableTreeGrid() { var list = Folder.Create(Server.MapPath("~")).Children; return View(list); }

View code

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

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