TreeView
ノードの編集
このビューは、TreeView コントロール内のノードを編集方法を示します。
機能
サンプル
説明
TreeView コントロールは編集がサポートされています。「is-read-only」属性を false に設定すると、［F2］キーを押してノードのコンテンツを編集することができます。
ノードのコンテンツに行われた編集は、「display-member-path」属性によって指定されたプロパティを使用して、「source」属性内の項目に自動的に適用されます。
編集の動作は、「node-edit-starting」、「node-edit-started」、「node-edit-ending」、「node-edit-ended」の各イベントを使用してカスタマイズすることができます。
次の例では、子を持たないノードに対してのみ編集を有効にします。編集するには、ノードを選択し、［F2］を押します。
ソース
EditingNodesController.cs
using MvcExplorer.Models;
using Microsoft.AspNetCore.Mvc;
namespace MvcExplorer.Controllers
{
partial class TreeViewController
{
// GET: EditingNodes
public ActionResult EditingNodes()
{
return View(Property.GetData(Url));
}
}
}
EditingNodes.cshtml
@model Property[]
@section Scripts{
<script type="text/javascript">
function nodeEditStarting(treeview, e) {
if (e.node.hasChildren) {
e.cancel = true;
}
}
</script>
}
<c1-tree-view display-member-path="Header" child-items-path="Items"
image-member-path="Image" show-checkboxes="true"
is-read-only="false" source="Model"
node-edit-starting="nodeEditStarting"></c1-tree-view>
@section Summary{
<p>@Html.Raw(TreeViewRes.EditingNodes_Text0)</p>
}
@section Description{
<p>@Html.Raw(TreeViewRes.EditingNodes_Text1)</p>
<p>@Html.Raw(TreeViewRes.EditingNodes_Text2)</p>
<p>@Html.Raw(TreeViewRes.EditingNodes_Text3)</p>
<p>@Html.Raw(TreeViewRes.EditingNodes_Text4)</p>
}
マニュアル