FlexGrid
FlexGrid
Unbound TreeGrid
If you prefer to work in unbound mode, you can still build TreeGrid by adding rows and columns in code.
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 prefer to work in unbound mode, you can still build TreeGrid by adding rows and columns in code.
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 UnboundTreeGrid() { 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 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 | @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 () { let grid = wijmo.Control.getControl("#ubgrid"); grid.rows.defaultSize = 25; // add columns grid.columns.push(new wijmo.grid.Column({ header: 'Header', width: '2*' })); grid.columns.push(new wijmo.grid.Column({ header: 'Size' })); let data = @Html.Raw(Json.Serialize(list)); // add rows for (let r = 0; r < data.length; r++) { // add header var header = data[r]; var row = new wijmo.grid.GroupRow(); row.dataItem = header; row.isReadOnly = false; row.level = 0; grid.rows.push(row); grid.setCellData(row.index, 0, header.header); if (header.children) { addChild(grid, header, 1); } } }); function addChild(grid, parent, level){ for (var c = 0; c < parent.children.length; c++) { // add children var child = parent.children[c]; row = new wijmo.grid.GroupRow(); row.dataItem = child; row.isReadOnly = false; row.level = level; grid.rows.push(row); grid.setCellData(row.index, 0, child.header); grid.setCellData(row.index, 1, child.size); if (child.children) { addChild(grid, child, level+1); } } } </script>} <label>@Html.Raw(FlexGridRes.TreeGrid_Text0)</label> <c1-flex-grid id="ubgrid" class="custom-flex-grid" width="500px" auto-generate-columns="false" headers-visibility="Column" selection-mode="Row"> </c1-flex-grid> @section Description { @Html.Raw(FlexGridRes.TreeGrid_Unbound_Description) } |