TreeViewコントロールでは、IsReadOnlyプロパティを使用して、実行時のノードの編集を有効または無効にすることができます。IsReadOnlyプロパティがfalseに設定されている場合は、ノードをダブルクリックするか、ノードを選択した後に［F2］キーを押して、ノードの内容を編集できます。IsReadOnlyプロパティをtrueに設定すると、ツリーのノードを編集できないように制限できます。

ユーザーがノードの編集を終了すると、DisplayMemberPathプロパティを使用して、ノードの内容がItemsSource配列内の項目に自動的に適用されます。TreeViewコントロールでは、次のイベントを使用して編集動作をカスタマイズできます。

• OnClientNodeEditStarting - ノードが編集モードに入る前に発生します。
• OnClientNodeEditStarted - ノードが編集モードに入った後に発生します。
• OnClientNodeEditEnding - ノードが編集モードを出た後に発生します。
• OnClientNodeEditEnded - ノードが編集モードを出る前に発生します。

以下のコード例では、OnClientNodeEditStartingメソッドを使用して、子を持たないノードに対してのみ編集を有効にしています。次のコード例では、OnClientNodeEditStarting()メソッドでnodeEditStartingイベントを生成しています。nodeEditStarting(treeview, e)関数のtreeviewは送信元で、eはTreeNodeEventArgsクラス型です。

以下のコード例では、「クイックスタート」セクションで追加したPropertyモデルを使用しています。

コードの場合

@using <ApplicationName.Models>
@model Property[]
<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>