syncfusion-aspnetcore-dropdown-tree

Syncfusion DropDownTree コンポーネントの実装

Syncfusion DropDownTree コントロールは、階層型のツリーデータ構造を表示するドロップダウンコンポーネントです。ユーザーはツリー階層から単一または複数の値を選択できます。従来のドロップダウンリストの機能と、ツリー構造による階層的な整理を組み合わせているため、整理された入れ子状のデータ選択が必要なアプリケーションに最適です。

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

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

• 階層型データを表示する：項目が親子関係を持つドロップダウン形式で表示する場合
• ツリーベースの選択を有効にする：ノードの展開／折りたたみ機能を使用する場合
• 複数選択をサポートする：チェックボックスまたはキーボードナビゲーションを使用する場合
• カスタムテンプレートを実装する：項目、ヘッダー、フッター、選択値の表示に使用する場合
• データをバインドする：ローカルの JavaScript 配列、リモートサーバー（OData、Web API）、またはオンデマンドの遅延読み込みを使用する場合
• アクセシビリティを維持する：キーボード操作（矢印キー、Enter、Space）と ARIA 属性をサポートする場合
• コンポーネントをローカライズする：異なる文化や言語に対応させる場合
• ノードの選択を防止する：子ノードの選択は許可しつつ、親ノードの選択を防ぐ場合

主な機能の概要

DropDownTree コンポーネントは、ツリーベースのドロップダウン選択に関する包括的な機能を備えています。

• データバインディングのオプション：階層型データ、自己参照型データ構造、DataManager アダプターを使用したリモートデータサービス
• 選択モード：単一選択、チェックボックスによる複数選択、区切り文字による表示、チップ／ボックスモード、カスタムテンプレート
• キーボードナビゲーション：矢印キー、Enter、Space、Home、End、Alt+Up/Down、Escape による完全なキーボード操作
• カスタムテンプレート：項目テンプレート、値テンプレート、ヘッダーテンプレート、フッターテンプレート、レコードなしテンプレート、アクション失敗テンプレート
• ツリー設定：展開動作（クリック、ダブルクリック、自動）、オンデマンド読み込み（遅延読み込み）、親子間の自動チェック依存関係
• アクセシビリティ：リストボックスのロール、treeitem のロール、ARIA 属性、スクリーンリーダーのサポートに対応した WAI-ARIA 準拠
• フィルタリング：フィルターの種類（StartsWith、EndsWith、Contains）、大文字と小文字の区別、アクセント処理を設定できるリアルタイム検索
• 状態の保持：ブラウザーセッション間で状態を保持
• RTL サポート：アラビア語、ヘブライ語などの RTL 言語向けの右から左への表示

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

はじめに

📄 参照： references/getting-started.md

• プラットフォームのセットアップと前提条件
• NuGet パッケージのインストール
• スクリプトとスタイルシートの参照
• タグヘルパーの設定
• DropDownTree の基本的な初期化
• データバインディングを使った最初のレンダリング例
• 高度な機能を使用する前に必要な構成要素

データバインディングと階層

📄 参照： references/data-binding.md

• 入れ子状の配列構造を使った階層型データソースのバインディング
• 親値の関係を持つ自己参照型データ構造
• DataManager とアダプター（OData、ODataV4、WebAPI、URL）を使ったリモートデータのバインディング
• 大規模なデータセット向けのオンデマンド読み込み（遅延読み込み）
• フィールドマッピングの設定（text、value、child、parentValue、hasChildren）
• リモートデータのフィルタリングに対応するクエリ
• selectable プロパティを使ったノード選択の防止

選択とチェックボックスの機能

📄 参照： references/checkbox-and-selection.md

• showCheckBox プロパティを使ったチェックボックスモードの有効化
• allowMultiSelection プロパティを使った複数選択
• 親子の同期による自動チェック依存関係
• ポップアップヘッダーでの「すべて選択」機能
• 選択した項目の表示モード（Default、Delimiter、Box、Custom）
• 選択項目の表示に使用するカスタムテンプレート
• チェック状態の管理と、無効な子項目のチェック防止
• 展開動作とツリー操作モードの制御

テンプレートとカスタマイズ

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

• リスト項目の外観をカスタマイズする項目テンプレート
• 選択した値の表示をカスタマイズする値テンプレート
• ポップアップのヘッダーをカスタマイズするヘッダーテンプレート
• ポップアップのフッターをカスタマイズするフッターテンプレート
• 検索結果が空の場合に表示するテンプレート
• リモートデータのエラーに対するアクション失敗テンプレート
• 複数選択の表示方法をカスタマイズするテンプレートモード（Default、Delimiter、Box、Custom）
• CSS クラスのカスタマイズと HTML 属性のマッピング
• スタイル設定と外観のカスタマイズ手法

プロパティと設定

📄 参照： references/properties-and-configuration.md

• フィルタリング、外観、動作、データ設定など、プロパティの完全なリファレンス
• 展開動作の設定（Auto、Click、DblClick、None）
• フィルターの種類とフィルターバーのカスタマイズ
• フロートラベルの種類とプレースホルダーテキスト
• 永続化と状態管理
• RTL とロケールの設定
• アイコン CSS と画像 URL のマッピング
• HTML 属性と CSS クラスの適用
• ポップアップを閉じたときの破棄動作

イベントと操作

📄 参照： references/events-and-interactions.md

• 変更イベントと値の追跡
• 選択イベント（選択／選択解除の操作）
• ポップアップ表示を防止またはカスタマイズするための、表示前イベント／ポップアップイベント
• リモートデータの取得完了時に発生するデータバインドイベント
• カスタムフィルターを実装するためのフィルタリングイベント
• キーボード操作イベントの処理
• 状態管理のためのフォーカスイベントとブラーイベント
• ハンドラーで使用できるイベント引数とプロパティ

アクセシビリティとグローバル化

📄 参照： references/accessibility-and-globalization.md

• キーボードナビゲーションのショートカットと操作パターン
• ARIA 属性と WAI-ARIA への準拠
• スクリーンリーダーのサポートとアクセシブルなマークアップ
• フォーカス管理とキーボードイベントの処理
• ローカライズと文化圏固有のテキストのカスタマイズ
• RTL（右から左に記述する）言語のサポート
• 複数言語の文字列のカスタマイズ
• ドロップダウンツリーのアクセシビリティに関するベストプラクティス

クイックスタートの例

基本的な初期化

@{
    var treeData = new List<TreeNode>
    {
        new TreeNode { Id = "1", Text = "Item 1" },
        new TreeNode { Id = "2", Text = "Item 2", Children = new List<TreeNode>
        {
            new TreeNode { Id = "3", Text = "Child 1" },
            new TreeNode { Id = "4", Text = "Child 2" }
        }}
    };
}

<ejs-dropdowntree id="tree" placeholder="Select an item">
    <e-dropdowntree-fields dataSource="@treeData" text="Text" value="Id" child="Children"></e-dropdowntree-fields>
</ejs-dropdowntree>

チェックボックスのサポートを有効にする

<ejs-dropdowntree id="treeCheckbox" showCheckBox="true">
    <e-dropdowntree-fields dataSource="@treeData" text="Text" value="Id" child="Children"></e-dropdowntree-fields>
</ejs-dropdowntree>

テンプレートを使用する

@{
    var itemTemp = "<span>${Text} (${Id})</span>";
    var valueTemp = "<span>Selected: ${Text}</span>";
}

<ejs-dropdowntree id="treeTemplate" itemTemplate="@itemTemp" valueTemplate="@valueTemp">
    <e-dropdowntree-fields dataSource="@treeData" text="Text" value="Id" child="Children"></e-dropdowntree-fields>
</ejs-dropdowntree>

よくあるパターン

パターン 1：階層化された組織カテゴリ

シナリオ：商品カテゴリを階層構造で表示する

<ejs-dropdowntree id="categories" placeholder="Select Category">
    <e-dropdowntree-treeSettings expandOn="true"></e-dropdowntree-treeSettings>
    <e-dropdowntree-fields dataSource="@CategoryHierarchy" text="CategoryName" value="CategoryId" child="SubCategories"></e-dropdowntree-fields>
</ejs-dropdowntree>

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

シナリオ：親子間の依存関係を自動的に適用して、複数の項目を選択できるようにする

<ejs-dropdowntree id="multiSelect" showCheckBox="true" allowMultiSelection="true" mode="Box">
    <e-dropdowntree-treeSettings autoCheck="true"></e-dropdowntree-treeSettings>
    <e-dropdowntree-fields dataSource="@DataSource" text="Text" value="Id" child="Children"></e-dropdowntree-fields>
</ejs-dropdowntree>

パターン 3：大規模なデータセットの遅延読み込み

シナリオ：大規模なツリーでパフォーマンスを向上させるため、表示中のノードのみを読み込む

<ejs-dropdowntree id="lazyLoad">
    <e-dropdowntree-treeSettings loadOnDemand="true"></e-dropdowntree-treeSettings>
    <e-dropdowntree-fields dataSource="@RemoteDataManager" text="Name" value="Id" child="Children" hasChildren="HasChild"></e-dropdowntree-fields>
</ejs-dropdowntree>

パターン 4：フィルタリングを伴うリモートデータ

シナリオ：ツリーデータをリモートから取得し、リアルタイム検索を有効にする C#（TreeViewController.cs）：

public ActionResult RemoteData()
{
    DropDownTreeFields parentData = new DropDownTreeFields();
    DropDownTreeFields childData = new DropDownTreeFields();
    object data = new DataManager
    {
        Url = "https://services.odata.org/V4/Northwind/Northwind.svc",
        Adaptor = "ODataV4Adaptor",
        CrossDomain = true
    };
    // Parent data mapping
    parentData.Query = "new ej.data.Query().from('Employees').select('EmployeeID,FirstName,Title').take(5)";
    parentData.Value = "EmployeeID";
    parentData.Text = "FirstName";
    parentData.HasChildren = "EmployeeID";
    parentData.Child = childData;
    parentData.DataSource = data;
    // Child data mapping  
    childData.Query = "new ej.data.Query().from('Orders').select('OrderID,EmployeeID,ShipName').take(5)";
    childData.Value = "OrderID";
    childData.Text = "ShipName";
    childData.ParentValue = "EmployeeID";
    childData.DataSource = data;
    ViewBag.remoteFields = parentData;
    return View();
}

<ejs-dropdowntree id="remoteFilter" allowFiltering="true" filterType="StartsWith">
    <e-dropdowntree-fields child="ViewBag.child" query="new ej.data.Query().from('Employees').select('EmployeeID,FirstName,Title').take(5)" value="EmployeeID" text="FirstName" hasChildren="EmployeeID">
        <e-data-manager url="https://services.odata.org/V4/Northwind/Northwind.svc" adaptor="ODataV4Adaptor" crossDomain="true"></e-data-manager>
    </e-dropdowntree-fields>
</ejs-dropdowntree>

パターン 5：カスタム表示モード

シナリオ：複数選択した項目をチップ形式で表示する

<ejs-dropdowntree id="chipMode" showCheckBox="true" allowMultiSelection="true" mode="Box" delimiterChar=",">
    <e-dropdowntree-fields dataSource="@DataSource" text="Text" value="Id" child="Children"></e-dropdowntree-fields>
</ejs-dropdowntree>

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

プロパティ	型	デフォルト	用途
dataSource	DataManager | Array	-	DropDownTree のデータ項目を指定します
fields	FieldsModel	-	データソースのフィールドを DropDownTree のプロパティにマッピングします
value	string[]	-	現在選択されている値を取得または設定します
text	string	-	現在選択されている項目のテキストを取得します
showCheckBox	boolean	false	複数選択用のチェックボックスモードを有効にします
allowMultiSelection	boolean	false	チェックボックスを使わずに複数選択を有効にします
allowFiltering	boolean	false	項目を検索するためのフィルターバーを有効にします
enabled	boolean	true	コンポーネントを有効または無効にします
readonly	boolean	false	読み取り専用状態を設定します
mode	Mode	'Default'	選択項目の表示モード（Default、Delimiter、Box、Custom）
treeSettings	TreeSettings	-	ツリーの展開と選択の動作を設定します
itemTemplate	string | Function	-	項目表示をカスタマイズするためのテンプレート
valueTemplate	string | Function	-	選択された値の表示をカスタマイズするためのテンプレート
headerTemplate	string | Function	-	ポップアップヘッダーのテンプレート
footerTemplate	string | Function	-	ポップアップフッターのテンプレート
noRecordsTemplate	string | Function	-	項目が見つからない場合のテンプレート
actionFailureTemplate	string | Function	-	リモートデータの取得に失敗した場合のテンプレート
customTemplate	string | Function	-	mode='Custom' で選択項目を表示するカスタムテンプレート
placeholder	string	-	入力要素に表示するプレースホルダーテキスト
floatLabelType	FloatLabelType	'Never'	ラベルをフローティング表示する動作
locale	string	'en'	ローカライズに使用するカルチャ
enableRtl	boolean	false	右から左への表示
enablePersistence	boolean	false	セッションをまたいで状態を保持します
cssClass	string	-	スタイル設定用の CSS クラス
filterType	TreeFilterType	'StartsWith'	検索フィルターのアルゴリズム
ignoreCase	boolean	true	大文字と小文字を区別せずに検索します
ignoreAccent	boolean	false	検索時に発音区別符号を無視します

一般的なユースケース

1. 組織階層：従業員の報告系統や部門の階層を表示します
2. ファイルシステムのナビゲーション：展開可能なディレクトリでフォルダー構造を表示します
3. カテゴリの選択：eコマース向けに、サブカテゴリを含む商品カテゴリを表示します
4. 地理的階層：国・州・都市をネストした選択項目として表示します
5. 権限／ロールの階層：複数レベルの権限またはロールを選択します
6. タスクの分解構造：プロジェクトのタスクを階層的に整理します
7. ローカライズの選択：言語ファミリーと個別の言語を選択します
8. 機能／モジュールの選択：アプリケーションの機能をモジュールや機能ごとに整理します

---

次のステップ：現在のタスクに応じて、上記からリファレンスドキュメントを選択してください。各リファレンスファイルには、その機能領域に特化した詳細な例、プロパティの説明、実装ガイドラインが含まれています。