FlexGrid
ツリーグリッド
機能
サンプル
説明
このサンプルは、FlexGrid を使用してツリービューを表示する方法を示します。
ソース
TreeGridController.cs
using Microsoft.AspNetCore.Mvc;
using MvcExplorer.Models;
namespace MvcExplorer.Controllers
{
public partial class FlexGridController : Controller
{
public ActionResult TreeGrid()
{
return View();
}
}
}
TreeGrid.cshtml
@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)
}
マニュアル