TreeView
カスタムノードコンテンツ
このビューは、TreeView コントロール内のノードコンテンツをカスタマイズする方法を示します。
機能
サンプル
説明
TreeView ノードのコンテンツは、formatItem イベントを使用してカスタマイズすることができます。イベントハンドラのパラメータには、ノードとレンダリングされるデータ項目を表す要素が含まれます。
この例では、「format-item」イベントを使用して、ツリーの新しい項目の右に「New」バッジを追加します。
ソース
CustomNodeContentController.cs
using MvcExplorer.Models;
using Microsoft.AspNetCore.Mvc;
namespace MvcExplorer.Controllers
{
partial class TreeViewController
{
// GET: CustomNodeContent
public ActionResult CustomNodeContent()
{
return View(Property.GetData(Url));
}
}
}
CustomNodeContent.cshtml
@model Property[]
@section Scripts{
<script type="text/javascript">
function formatItem(treeview, args) {
if (args.dataItem.NewItem) {
var img = wijmo.createElement('<img style="margin-left:6px" src="@Href("~/Content/images/new.png")"/>');
args.element.appendChild(img);
}
}
</script>
}
<c1-tree-view display-member-path="Header" child-items-path="Items" show-checkboxes="true" checked-member-path="Checked"
source="Model" format-item="formatItem"></c1-tree-view>
@section Summary{
<p>@Html.Raw(TreeViewRes.CustomNodeContent_Text0)</p>
}
@section Description{
<p>@Html.Raw(TreeViewRes.CustomNodeContent_Text1)</p>
<p>@Html.Raw(TreeViewRes.CustomNodeContent_Text2)</p>
}
マニュアル