FlexGrid
Tree View
Features
Sample
Description
This sample shows how to use FlexGrid to display a tree view.
Source
TreeViewController.cs
using System.Web.Mvc;
namespace MvcExplorer.Controllers
{
public partial class FlexGridController : Controller
{
public ActionResult TreeView()
{
var list = MvcExplorer.Models.Folder.Create(Server.MapPath("~")).Children;
return View(list);
}
}
}
TreeView.cshtml
@using C1.Web.Mvc.Grid
@model IEnumerable<ITreeItem>
@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>
}
<label>@Html.Raw(Resources.FlexGrid.TreeView_Text0)</label>
@(Html.C1().FlexGrid().Id("grid").CssClass("custom-flex-grid").Width(500)
.Bind(Model)
.ChildItemsPath("Children")
.IsReadOnly(true)
.AutoGenerateColumns(false)
.Columns(columns =>
{
columns.Add().Binding("Header").Width("*");
columns.Add().Binding("Size").Width("80").Align("center");
})
.AllowResizing(AllowResizing.None)
.HeadersVisibility(HeadersVisibility.None)
.SelectionMode(SelectionMode.ListBox)
)
@section Scripts{
<script>
c1.documentReady(function () {
wijmo.Control.getControl("#grid").rows.defaultSize = 25;
});
</script>
}
@section Description {
@Html.Raw(Resources.FlexGrid.TreeView_Text1)
}
Documentation