FlexGrid
FlexGrid
Editable TreeGrid
If you use FlexGrid's ChildItemsPath to show the data as a tree, the resulting grid will be read-only by default.
Features
Header
Size
Header
Size
Controllers
Accordion
AccordionPaneCollapsedController.cs
256
IndexController.cs
402
AutoComplete
ComplexTypeController.cs
723
CustomActionController.cs
1,009
IndexController.cs
940
Barcode
IndexController.cs
2,684
BulletGraph
DirectionController.cs
803
EditingController.cs
895
IndexController.cs
241
RangesController.cs
785
ShowTextController.cs
802
0
Description
If 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. If you want your tree to be editable, handle the OnClientLoadedRows event to set the IsReadOnly property of every row to false.
1 2 3 4 5 6 7 8 9 10 11 12 | using Microsoft.AspNetCore.Mvc; namespace MvcExplorer.Controllers { public partial class FlexGridController : Controller { public ActionResult EditableTreeGrid() { return View(); } } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 | @model IEnumerable<ITreeItem> @{ var list = Folder.Create(Startup.Environment.ContentRootPath).Children; } @section Styles{ <style> .custom-flex-grid { height: 400px; background-color: white; box-shadow: 4px 4px 10px 0px rgba(50, 50, 50, 0.75); margin-bottom: 12px; } .custom-flex-grid .wj-cell { background-color: #fff; border: none; font-size: 10pt; } .custom-flex-grid .wj-state-selected { background: #000; color: #fff; } .custom-flex-grid .wj-state-multi-selected { background: #222; color: #fff; } </style> } @section Scripts{ <script> c1.documentReady(function () { wijmo.Control.getControl("#grid").rows.defaultSize = 25; }); function setEditableRows(s, e) { s.rows.forEach(function (row) { row.isReadOnly = false; }); } </script>} <label>@Html.Raw(FlexGridRes.TreeGrid_Text0)</label> <c1-flex-grid id="grid" class="custom-flex-grid" width="500px" child-items-path="Children" auto-generate-columns="false" allow-resizing="None" headers-visibility="Column" selection-mode="Row" loaded-rows="setEditableRows"> <c1-items-source source-collection="list"></c1-items-source> <c1-flex-grid-column binding="Header" width="*"></c1-flex-grid-column> <c1-flex-grid-column binding="Size" width="80" align="center"></c1-flex-grid-column> </c1-flex-grid> @section Description { @Html.Raw(FlexGridRes.TreeGrid_Editable_Description) } |