ASP.NET MVC Controls | ComponentOne
Working with Controls / FlexGrid / Work with FlexGrid / TreeGrid / Editable TreeGrid
In This Topic
    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>