syncfusion-aspnetcore-tree-view

Syncfusion Core TreeView の実装

このスキルを使用する場面

次のような場合に、このスキルを使用します。

• 階層データ構造を表示する - 組織図、ファイルシステム、カテゴリーツリーなど、あらゆる入れ子構造のデータをツリー形式で表示する
• ユーザーによる選択を可能にする - キーボードやマウス操作に対応した単一選択または複数選択機能を実装する
• インタラクティブなツリーを構築する - ドラッグ＆ドロップ、ノード編集、チェックボックス、動的なノード操作を追加する
• 外観をカスタマイズする - テンプレート、アイコン、アニメーション、スタイルを適用して、アプリケーションのデザインに合わせる
• ツリーのイベントを処理する - 展開／折りたたみ、選択、編集のイベントでノード操作に対応する
• オンデマンド読み込みを実装する - 親ノードの展開時にのみ子ノードを読み込むことで、大規模なデータセットのパフォーマンスを最適化する
• アクセシビリティに準拠したインターフェースを作成する - アクセシビリティを必要とするユーザー向けに、キーボード操作とスクリーンリーダーへの対応を確保する

コンポーネントの概要

Syncfusion TreeView は、強力なインタラクティブ機能を備えた、階層データをツリー構造で表示するエンタープライズグレードのコンポーネントです。ローカルおよびリモートのデータバインディング、複数の選択モード、ドラッグ＆ドロップ操作、ノード編集、チェックボックス、包括的なイベント処理をサポートしています。

主な機能

• データバインディング：階層データ、自己参照データ、ローカル配列、リモートデータサービス（OData、Web API、DataManager）に対応
• ノード操作：単一選択、複数選択（Ctrl／Shift キー）、キーボード操作（矢印キー、F2、Delete）
• 選択の種類：行全体の選択、ノードテキストの選択、チェックボックスによる選択、独立したノード状態
• 動的操作：プログラムによるノードの追加、削除、更新、更新、移動
• 編集：ダブルクリックまたは F2 キーによるインプレース編集と、検証機能
• ドラッグ＆ドロップ：視覚的なインジケーターと複数ノードのドラッグに対応した、完全なドラッグ＆ドロップ機能
• チェックボックス：親子間の依存関係、自動チェックの伝播、独立した状態
• カスタマイズ：ノードテンプレート、カスタムアイコン、CSS スタイル、アニメーション効果
• パフォーマンス：大規模なデータセット向けのオンデマンド読み込みレンダリング、子ノードの遅延読み込み
• アクセシビリティ：完全なキーボード対応、ARIA 属性、スクリーンリーダーとの互換性

ドキュメントとナビゲーションガイド

実装する TreeView の機能に応じて、このガイドを使用してください。

はじめに

📄 参照： references/getting-started.md

次のような場合に参照してください。

• アプリケーションで初めて TreeView を設定する
• 基本的なコンポーネントの初期化と構成について理解する
• 前提条件となる設定とインストール手順を確認する
• 最初に動作する TreeView の例を確認する

データバインディングとフィールドの構成

📄 参照： references/data-binding-and-fields.md

次のような場合に参照してください。

• ローカル配列またはリモートサービスからデータをバインドする
• 階層データ構造または自己参照データ構造を構成する
• データソースのフィールドを TreeView のプロパティにマッピングする
• DataManager を使用してリモートデータバインディングを実装する
• オンデマンド読み込みのシナリオを処理する

ノードの選択（単一選択と複数選択）

📄 参照： references/node-selection.md

次のような場合に参照してください。

• 単一ノードの選択を有効にする
• Ctrl キーと Shift キーを使用した複数選択を実装する
• プログラムから選択されたノードを追跡する
• 選択イベントに対応する
• 特定のノードの選択を防ぐ

ノードの展開と折りたたみ

📄 参照： references/node-expansion.md

次のような場合に参照してください。

• ノードの展開／折りたたみの動作を制御する
• クリックまたはダブルクリックでの展開を構成する
• 展開／折りたたみのイベントを処理する
• 展開されたノードの状態を管理する
• オンデマンド読み込みによる展開を実装する

チェックボックスとチェック済みノード

📄 参照： references/checkboxes-and-checked-nodes.md

次の操作を行う場合：

• TreeView ノードでチェックボックスを有効にする
• チェック済みノードとその状態を追跡する
• 親子関係に応じた自動チェックを実装する
• 独立したノードのチェック状態を設定する
• チェックボックスの変更イベントを処理する

ドラッグ＆ドロップ操作

📄 参照： references/drag-and-drop.md

次の操作を行う場合：

• ドラッグ＆ドロップ機能を有効にする
• 単一ノードおよび複数ノードのドラッグを処理する
• ドロップ領域と制限を制御する
• ドラッグ＆ドロップのライフサイクルイベントに応答する
• 特定のノードのドラッグを防止する

ノードの編集と検証

📄 参照： references/node-editing.md

次の操作を行う場合：

• ノードテキストのインプレース編集を有効にする
• ダブルクリックまたは F2 キーによる編集モードを実装する
• 編集中にノードテキストを検証する
• 特定のノードの編集を防止する
• 編集操作を保存またはキャンセルする

テンプレートとスタイル

📄 参照： references/templates-and-styling.md

次の操作を行う場合：

• テンプレートでノードの外観をカスタマイズする
• カスタムアイコンと画像を適用する
• アニメーションとトランジションを設定する
• 行全体を選択したときのスタイルを実装する
• TreeView のカスタマイズに CSS クラスを使用する

ノードの操作と動的処理

📄 参照： references/node-manipulation.md

次の操作を行う場合：

• プログラムで新しいノードを追加する
• 既存のノードを削除する
• ノードのテキストやプロパティを更新する
• ノードのコンテンツを更新する
• ノードを別の位置に移動する
• プログラムでツリーデータを取得する

イベントとキーボードナビゲーション

📄 参照： references/events-and-keyboard-navigation.md

次の操作を行う場合：

• すべての TreeView イベント（展開、選択、チェック、ドラッグ、編集）を処理する
• キーボードナビゲーションのサポートを実装する
• ユーザーの操作に応答する
• 特定の操作に対するデフォルトの動作を防止する
• コンポーネントのライフサイクルイベントを追跡する

API リファレンス

📄 参照： references/api-reference.md

次の操作を行う場合：

• 特定のプロパティ定義とデフォルト値を確認する
• パラメーターの説明とともにメソッドシグネチャを確認する
• イベントハンドラーのパラメーターと構造を理解する
• FieldsSettings の設定オプションを参照する
• 展開／折りたたみの効果に関する AnimationSettings を確認する
• すべてのプロパティ、メソッド、イベントのコード例を含む完全な API ドキュメントを取得する

クイックスタートの例

TreeView をすぐに動作させるための最小限の例を示します。

<ejs-treeview id="treeAdvanced" showCheckBox="true" 
    allowMultiSelection="true" allowDragAndDrop="true" allowEditing="true">
    <e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild"></e-treeview-fields>
</ejs-treeview>

一般的なパターン

パターン 1：イベント処理を伴う単一選択

<ejs-treeview id="treeAdvanced" allowMultiSelection="false">
    <e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild"></e-treeview-fields>
</ejs-treeview>

パターン 2：チェックボックスを使用した複数選択

<ejs-treeview id="treeAdvanced" showCheckBox="true" 
    allowMultiSelection="true">
    <e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild"></e-treeview-fields>
</ejs-treeview>

パターン 3：オンデマンド読み込みによる遅延読み込み

<ejs-treeview id="treeAdvanced" loadOnDemand="true">
    <e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild"></e-treeview-fields>
</ejs-treeview>

パターン 4：検証機能付きの編集可能なツリー

<ejs-treeview id="treeRestricted" allowEditing="true" nodeEditing="nodeEditing" nodeEdited="nodeEdited">
    <e-treeview-fields dataSource="ViewBag.dataSource" id="id" text="name"></e-treeview-fields>
</ejs-treeview>

<script>
    function nodeEditing(args) {
        if (args.newText.length < 3) {
          args.cancel = true;
        }
    }
    function nodeEdited(args) {
      console.log('Node text updated to:', args.newText);
    }
</script>

パターン 5：制限付きのドラッグ＆ドロップ

<ejs-treeview id="treeNodeDrag" allowDragAndDrop="true" 
    nodeDragStart="onDragStart" 
    nodeDropped="nodeDropped">
    <e-treeview-fields dataSource="ViewBag.dataSource" id="id" text="name"></e-treeview-fields>
</ejs-treeview>

<script>
    function onDragStart(args) {
      if (!args.nodeData.pid) {
          args.cancel = true;
      }
    }
    
    function nodeDropped(args) {
        console.log('Node dropped successfully');
    }
</script>

主要プロパティのリファレンス

プロパティ	型	デフォルト	用途
fields	FieldsSettings	-	データソースとフィールドのマッピングを設定します
dataSource	array | DataManager	[]	TreeView ノードのデータソース
showCheckBox	boolean	false	ノード選択用のチェックボックスを表示します
allowMultiSelection	boolean	false	複数ノードの選択を有効にします
allowDragAndDrop	boolean	false	ドラッグ＆ドロップ操作を有効にします
allowEditing	boolean	false	ノードのインプレース編集を有効にします
allowTextWrap	boolean	false	はみ出したノードのテキストを折り返します
loadOnDemand	boolean	true	親ノードを展開したときに子ノードを読み込みます
fullRowSelect	boolean	false	テキストではなく行全体を選択します
fullRowNavigable	boolean	false	キーボードで行全体を操作できるようにします
expandOn	string	'Click'	展開／折りたたみを行う操作（Click、DblClick、None）
sortOrder	string	'None'	ノードの並べ替え（None、Ascending、Descending）
selectedNodes	string[]	[]	選択されたノード ID
checkedNodes	string[]	[]	チェックされたノード ID
expandedNodes	string[]	[]	展開されたノード ID
cssClass	string	''	カスタム CSS クラス
disabled	boolean	false	TreeView の操作を無効にします
enablePersistence	boolean	false	ページの再読み込み後も状態を保持します
enableRtl	boolean	false	右から左への表示を有効にします

一般的なユースケース

ユースケース 1：ファイルマネージャーのツリー

フォルダーとファイルからなる階層型ファイルシステムを表示し、ユーザーがファイルを参照、選択、管理できるようにします。

主な機能：階層型データ、ファイル／フォルダーの種類を示すアイコン、複数選択、ファイル移動用のドラッグ＆ドロップ、操作用のコンテキストメニュー。

関連リファレンス：data-binding-and-fields.md、templates-and-styling.md、drag-and-drop.md

ユースケース 2：組織図

部署やチームごとに従業員を整理した会社の階層を表示します。

主な機能：階層型データ、従業員の詳細を表示するノードテンプレート、検索／フィルター、単一選択、展開／折りたたみ。

関連リファレンス：data-binding-and-fields.md、templates-and-styling.md、node-selection.md

ユースケース 3：権限／ロール管理

ユーザーがロールに複数の権限を選択できるように、階層型の権限またはロールを表示します。

主な機能：チェックボックス、複数選択、親子間の依存関係、自動チェックの伝播、チェックボックスイベント。

関連リファレンス：checkboxes-and-checked-nodes.md、node-selection.md

ユースケース 4：商品カテゴリーのブラウザー

フィルタリングと検索機能を使って商品カテゴリーを参照します。

主な機能：オンデマンド読み込みによる大規模なデータセット、単一選択、キーボード操作、クリック時の展開。

関連リファレンス：data-binding-and-fields.md、node-expansion.md、events-and-keyboard-navigation.md

ユースケース 5：メニュー構造エディター

管理者が階層型のメニュー構造を作成、編集できるようにします。

主な機能：ノード編集、ノードの追加／削除／移動、テンプレート、ドラッグ＆ドロップ、検証機能付きのインプレース編集。

関連リファレンス：node-manipulation.md、node-editing.md、templates-and-styling.md

まとめ

Syncfusion TreeView コンポーネントは、階層型データの表示と操作に必要な機能を備えたソリューションです。強力なデータバインディング機能に加え、複数選択、ドラッグ＆ドロップ、編集、チェックボックスなどの豊富なインタラクティブ機能を提供します。テンプレートとスタイル設定による幅広いカスタマイズオプションを活用すれば、あらゆるビジネス要件に応える高度なツリーベースのインターフェイスを作成できます。

まず Getting Started リファレンスで最初の TreeView を設定し、その後は要件に応じて、上記のドキュメントガイドから個別の機能を確認してください。

---

次のステップ：Documentation and Navigation Guide セクションから最初のタスクを選び、リファレンスガイドに従って TreeView 機能を実装してください。