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.
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:
| EditableTreeGridController.cshtml |
Copy Code
|
|---|---|
public IActionResult EditableTreeGrid() { var list = Folder.Create(Directory.GetCurrentDirectory()).Children; return View(list); } |
|
| EditableTreeGrid.razor |
Copy Code
|
|---|---|
@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> |
|
