syncfusion-blazor-dropdown-tree

Syncfusion Blazor Dropdown Tree コンポーネントの実装

Blazor Dropdown Tree コンポーネントは、ツリー構造のデータをドロップダウンポップアップに表示する、階層データ選択コントロールです。ローカルおよびリモートデータのバインド、単一選択と複数選択のモード、チェックボックス、フィルタリング、カスタムテンプレート、包括的なイベント処理に対応しています。

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

• 階層データの表示：コンパクトなドロップダウン形式で表示します
• 単一選択：ツリー構造から項目を1つ選択できるようにします（既定のモード）
• 複数選択：CTRL+SHIFT ショートカットを使って、複数のツリーノードを選択できるようにします
• チェックボックスによる選択：依存状態の管理を伴う、チェックボックスベースの複数選択を提供します
• ツリーデータのフィルタリング：テキストでノードを絞り込む検索機能を実装します
• リモートデータソース：OData、OData V4、Web API、またはカスタムサービスエンドポイントにバインドします
• カスタムテンプレート：項目の表示、選択値の表示、ポップアップヘッダーをカスタマイズします
• イベント処理：ライフサイクルイベント、選択の変更、ポップアップ操作に応答します
• フォーム検証：フォーム検証フレームワークと連携します
• スタイルと外観：CSS クラス、無効状態、テーマのカスタマイズを適用します

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

はじめに

📄 参照： references/getting-started.md

• インストールと NuGet パッケージのセットアップ
• Web アプリと Server アプリの構成
• コンポーネントの基本的な初期化
• データバインドの基礎
• 最初に動作するサンプル

選択とモード

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

• 単一選択（既定の動作）
• AllowMultiSelection プロパティを使った複数選択
• キーボードショートカット（CTRL、SHIFT）
• 事前選択値と動的な選択
• @bind-Value を使った選択値の取得
• 選択のクリア

チェックボックス機能

📄 参照： references/checkbox-features.md

• 複数項目を選択する ShowCheckBox プロパティ
• 依存する親子関係を設定する AutoUpdateCheckState
• すべてのノードを選択／選択解除する ShowSelectAll
• SelectAllAsync とプログラムによる選択メソッド

データバインドとリモートデータ

📄 参照： references/data-binding-operations.md

• ローカルデータのバインド（階層型と自己参照型）
• ExpandoObject と DynamicObject のバインド
• ODataAdaptor、ODataV4Adaptor、WebApiAdaptor を使ったリモートデータ
• Entity Framework との連携
• 動的なデータ更新に対応する Observable コレクション
• 大規模データセット向けのオンデマンド読み込み
• 項目の動的な追加／削除
• ノード情報を取得する GetTreeViewData メソッド

イベントとコールバック

📄 参照： references/events-callbacks.md

• ライフサイクルイベント（Created、Destroyed）
• ポップアップイベント（OnPopupOpen、OnPopupClose）
• 選択イベント（ValueChanging、ValueChanged）
• カスタムフィルターを使ったフィルタリングイベント
• エラー処理のための OnActionFailure
• イベントハンドラーと非同期処理への対応

フィルタリングと検索

📄 参照： references/filtering-search.md

• 検索を有効にする AllowFiltering プロパティ
• FilterType のオプション（StartsWith、EndsWith、Contains）
• 大文字と小文字を区別しないフィルタリングの IgnoreCase
• FilterBarPlaceholder のカスタマイズ
• 最小フィルター文字数の実装

並べ替え

📄 参照： references/sorting.md

• SortOrder プロパティ（None、Ascending、Descending）
• 動的な並べ替えの更新

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

📄 参照： references/templates-customization.md

• カスタムノード表示用の ItemTemplate
• 選択値表示用の ValueTemplate
• ポップアップヘッダーをカスタマイズする HeaderTemplate
• 高度なスタイル設定とレイアウトパターン

スタイルと外観

📄 参照： references/styling-appearance.md

• 無効状態の設定
• 定義済みクラス（e-success、e-warning、e-error、e-outline）を指定する CssClass プロパティ
• PopupWidth と PopupHeight のカスタマイズ
• レイヤー管理用の ZIndex
• テーマのサポートとレスポンシブデザイン

フォームの検証と設定

📄 参照： references/validation-localization.md

• フォーム検証との連携
• フォームでの値のバインド
• ローカライズのサポート
• PopupSettings の設定
• アクセシビリティとプレースホルダーの設定

クイックスタートの例

@using Syncfusion.Blazor.Navigations

<SfDropDownTree TItem="EmployeeData" TValue="string" 
    Placeholder="Select an employee" 
    Width="500px">
    <DropDownTreeField TItem="EmployeeData" 
        DataSource="Data" 
        ID="Id" 
        Text="Name" 
        HasChildren="HasChild" 
        ParentID="PId">
    </DropDownTreeField>
</SfDropDownTree>

@code {
    List<EmployeeData> Data = new List<EmployeeData>
    {
        new EmployeeData() { Id = "1", Name = "Steven Buchanan", Job = "General Manager", HasChild = true, Expanded = true },
        new EmployeeData() { Id = "2", PId = "1", Name = "Laura Callahan", Job = "Product Manager", HasChild = true },
        new EmployeeData() { Id = "3", PId = "2", Name = "Andrew Fuller", Job = "Team Lead", HasChild = true },
        new EmployeeData() { Id = "4", PId = "3", Name = "Anne Dodsworth", Job = "Developer" },
    };

    public class EmployeeData
    {
        public string? Id { get; set; }
        public string? Name { get; set; }
        public string? Job { get; set; }
        public bool HasChild { get; set; }
        public bool Expanded { get; set; }
        public string? PId { get; set; }
    }
}

よく使われるパターン

パターン 1：チェックボックスによる複数選択

親子の状態を自動管理しながら、チェックボックスによる選択を有効にします。

<SfDropDownTree TItem="EmployeeData" TValue="string" 
    ShowCheckBox="true" 
    AutoUpdateCheckState="true"
    ShowSelectAll="true">
    <DropDownTreeField TItem="EmployeeData" DataSource="Data" 
        ID="Id" Text="Name" HasChildren="HasChild" ParentID="PId">
    </DropDownTreeField>
</SfDropDownTree>

パターン 2：事前選択された値

AllowMultiSelection を指定して、@bind-Value で既定の選択ノードを設定します。

<SfDropDownTree TItem="EmployeeData" TValue="string" 
    AllowMultiSelection="true"
    @bind-Value="@SelectedIds">
    <DropDownTreeField TItem="EmployeeData" DataSource="Data" 
        ID="Id" Text="Name" HasChildren="HasChild" ParentID="PId">
    </DropDownTreeField>
</SfDropDownTree>

@code {
    List<string> SelectedIds = new List<string>() { "1", "5" };
}

パターン 3：検索とフィルタリング

カスタムのフィルタータイプを指定して、検索機能を有効にします。

<SfDropDownTree TItem="EmployeeData" TValue="string" 
    AllowFiltering="true"
    FilterType="FilterType.Contains"
    FilterBarPlaceholder="Search employees...">
    <DropDownTreeField TItem="EmployeeData" DataSource="Data" 
        ID="Id" Text="Name" HasChildren="HasChild" ParentID="PId">
    </DropDownTreeField>
</SfDropDownTree>

パターン 4：リモートデータのバインド（OData）

DataManager を使用して、リモートの OData サービスにバインドします。

<SfDropDownTree TValue="int?" TItem="TreeData" Placeholder="Select an employee" Width="500px">
    <DropDownTreeField TItem="TreeData" Query="@Query" 
        ID="EmployeeID" Text="FirstName" ParentID="ReportsTo" HasChildren="HasChildren">
        <SfDataManager Url="url" 
            Adaptor="Syncfusion.Blazor.Adaptors.ODataV4Adaptor" 
            CrossDomain="true">
        </SfDataManager>
    </DropDownTreeField>
</SfDropDownTree>

@code {
    public Query Query = new Query();
}

主なプロパティと API

プロパティ	型	説明
TItem	ジェネリック	データ項目のモデルクラス
TValue	ジェネリック	選択された値の型
Value	List	双方向バインド可能な選択値
DataSource	IEnumerable	ローカルデータソース（DropDownTreeField 経由）
AllowMultiSelection	bool	複数ノードの選択を有効化
ShowCheckBox	bool	選択用のチェックボックスを表示
AutoUpdateCheckState	bool	親子のチェックボックス状態を自動同期
ShowSelectAll	bool	すべて選択／選択解除するチェックボックスを表示
AllowFiltering	bool	検索フィルタリングを有効化
FilterType	FilterType	フィルターの一致方法（StartsWith、EndsWith、Contains）
IgnoreCase	bool	大文字と小文字を区別しないフィルタリング
LoadOnDemand	bool	展開時に子ノードを遅延読み込み
Placeholder	string	入力欄のプレースホルダーテキスト
Width	string	コンポーネントの幅
PopupWidth	string	ドロップダウンポップアップの幅
PopupHeight	string	ドロップダウンポップアップの高さ
ZIndex	int	ポップアップの CSS z-index
CssClass	string	カスタム CSS クラス
Disabled	bool	コンポーネントの操作を無効化

主なイベント

• Created：コンポーネントの初期化完了
• Destroyed：コンポーネントの破棄
• OnPopupOpen：アニメーション後にポップアップが開いたとき
• OnPopupClose：アニメーション後にポップアップが閉じたとき
• ValueChanging：値の変更前（DdtChangeEventArgs）
• ValueChanged：値の変更後（List）
• Filtering：検索テキストの入力時（DdtFilteringEventArgs）
• OnActionFailure：データ操作中のエラー

主なメソッド

• SelectAllAsync()：すべてのノードをプログラムから選択
• SelectAllAsync(false)：すべてのノードをプログラムから選択解除
• ClearAsync()：選択されているすべての値をクリア
• GetTreeViewData(id)：ID を指定してノード情報を取得