FlexGrid
FlexGrid
Tree View
This sample shows how to use FlexGrid to display a tree view.
Features
Header
Size
Controllers
Accordion
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
833
IndexController.cs
241
RangesController.cs
785
ShowTextController.cs
802
StylingController.cs
243
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 TreeView() { 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.TreeView_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.TreeView_Text1) } |