FlexGrid
FlexGrid
Tree Grid
This sample shows how to use FlexGrid to display a tree view.
Features
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
This sample shows how to use FlexGrid to display a tree view.
1 2 3 4 5 6 7 8 9 10 11 12 13 | using Microsoft.AspNetCore.Mvc; using MvcExplorer.Models; namespace MvcExplorer.Controllers { public partial class FlexGridController : Controller { public ActionResult TreeGrid() { 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 | @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; }); </script>} <label>@Html.Raw(FlexGridRes.TreeGrid_Text0)</label> <c1-flex-grid id="grid" class="custom-flex-grid" width="500px" child-items-path="Children" is-read-only="true" auto-generate-columns="false" allow-resizing="None" headers-visibility="None" selection-mode="ListBox"> <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_Text1) } |