syncfusion-blazor-treeview

Name: syncfusion-blazor-treeview
Author: syncfusion

github.com/syncfusionデザイン・UI4371 回インストール1 週間前に更新

リポジトリ

syncfusion-blazor-treeview について

Syncfusion TreeView で階層データを表示・操作する Blazor 開発者向けの実装ガイドです。データバインド、ノード選択と編集、ドラッグ＆ドロップ、検索、大規模データの仮想化を扱います。

主な機能

01ローカルまたはリモートデータのバインド
02単一・複数・チェックボックス選択
03ノード編集とドラッグ＆ドロップによる並べ替え
04検索、フィルタリング、オンデマンド読み込み
05大規模データの仮想スクロール

活用シーン

01ドラッグ＆ドロップ対応のファイルブラウザー
02組織図や階層ナビゲーションの作成
03カテゴリーフィルターや権限画面の構築

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/syncfusion/blazor-ui-components-skills --skill syncfusion-blazor-treeview

インストール後、Claude Code で/syncfusion-blazor-treeviewを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

references/

advanced-features.md

authorization-authentication.md

checkbox-features.md

customization-styling.md

data-binding.md

events-handling.md

expand-collapse-actions.md

getting-started.md

navigation-patterns.md

node-editing.md

node-selection.md

詳細

Syncfusion Blazor TreeView コンポーネントの実装

Blazor TreeView コンポーネントは、階層データを展開／折りたたみ可能なツリー構造で表示します。ローカルおよびリモートのデータバインディング、単一選択と複数選択、編集、チェックボックス、ドラッグ＆ドロップによる並べ替え、大規模なデータセット向けの仮想化、フィルタリング、包括的なイベント処理に対応しています。

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

次のような場合に TreeView コンポーネントを使用します。

階層データの表示：展開／折りたたみ可能なノードを含むツリー構造で表示する
単一選択：ユーザーがツリーから 1 つのノードを選択できるようにする
複数選択：Ctrl+クリックと Shift+クリックを使って、複数のツリーノードを選択できるようにする
チェックボックス選択：親子の状態を自動的に管理するチェックボックスベースの複数選択を提供する
ノードの編集：ノードのテキストをインラインで名前変更または編集できるようにする
ドラッグ＆ドロップ：階層内のノードを並べ替えられるようにする
フィルターと検索：ノードを検索する機能を実装する
リモートデータソース：Web API、OData サービス、またはカスタムエンドポイントにバインドする
イベントの処理：展開、折りたたみ、選択、編集、ドラッグ＆ドロップ操作に応答する
仮想化：大規模なデータセット（1000 以上のノード）をスムーズなスクロールで表示する
カスタムスタイル：ノードにアイコン、色、テンプレートを適用する

インストールとセットアップ

Syncfusion NuGet パッケージをインストールし、Blazor プロジェクトを構成します。

// 1. Install NuGet packages
// Install-Package Syncfusion.Blazor.Navigations -Version 26.1.35
// Install-Package Syncfusion.Blazor.Themes -Version 26.1.35

// 2. Add to _Imports.razor
@using Syncfusion.Blazor
@using Syncfusion.Blazor.Navigations

// 3. Register service in Program.cs
builder.Services.AddSyncfusionBlazor();

// 4. Add CSS theme to Index.html or _Layout.cshtml
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />

クイックスタート

@using Syncfusion.Blazor.Navigations

<SfTreeView TValue="MailItem">
    <TreeViewFieldsSettings TValue="MailItem"
        Id="Id"
        Text="FolderName"
        Child="Children"
        DataSource="@MyFolder">
    </TreeViewFieldsSettings>
    <TreeViewEvents TValue="MailItem" NodeSelected="OnNodeSelected"></TreeViewEvents>
</SfTreeView>

@code {
    public class MailItem
    {
        public string? Id { get; set; }
        public string? FolderName { get; set; }
        public List<MailItem>? Children { get; set; }
    }

    void OnNodeSelected(NodeSelectEventArgs args)
    {
        Console.WriteLine($"Selected: {args.NodeData.Text}");
    }

    List<MailItem> MyFolder = new()
    {
        new MailItem { Id = "1", FolderName = "Inbox", Children = new() },
        new MailItem { Id = "2", FolderName = "Sent", Children = new() }
    };
}

主なプロパティ

プロパティ	型	既定値	目的
`AllowDragAndDrop`	bool	false	ドラッグ＆ドロップによる階層の並べ替えを有効または無効にします
`AllowEditing`	bool	false	ダブルクリックによるノード名の変更を許可します
`AllowMultiSelection`	bool	false	Ctrl+クリックによる複数選択を有効にします
`ShowCheckBox`	bool	false	各ノードにチェックボックスを表示します
`AutoCheck`	bool	true	親をチェックしたときに、子ノードを自動的にチェックまたはチェック解除します
`EnablePersistence`	bool	false	展開、選択、チェックの状態を localStorage に保持します
`EnableVirtualization`	bool	false	1000 以上のノードに対する仮想スクロールを有効にします（Height が必要です）
`ExpandedNodes`	string[]	Empty	初期状態で展開するノード ID（双方向バインド可能）
`SelectedNodes`	string[]	Empty	選択されたノード ID（双方向バインド可能）
`CheckedNodes`	string[]	Empty	チェックされたノード ID（双方向バインド可能）
`LoadOnDemand`	bool	true	ノードの展開時にのみ子ノードを読み込みます
`ExpandOn`	ExpandAction	Click	Click／DoubleClick／None による展開を指定します
`Height`	string	"auto"	固定の高さ（仮想化に必要です）

主なメソッド

メソッド	目的
`ExpandAllAsync()`	すべてのノードを展開します
`ExpandAllAsync(string[] nodeIds)`	ID を指定してノードを展開します
`CollapseAllAsync()`	すべてのノードを折りたたみます
`CollapseAllAsync(string[] nodeIds)`	指定したノードを折りたたみます
`BeginEditAsync(string nodeId)`	ノードを編集モードにします
`GetTreeData()`	ツリーのすべてのデータを取得します
`GetTreeData(string nodeId)`	ID を指定してノードデータを取得します
`EnsureVisibleAsync(string nodeId)`	ノードが表示されるようにスクロールします
`CheckAllAsync()`	すべてのチェックボックスをチェックします
`UncheckAllAsync()`	すべてのチェックボックスのチェックを解除します
`ClearStateAsync()`	すべての状態（選択、展開、チェック）をクリアします

主要なイベント

イベント	発生するタイミング	主な用途
`Created`	TreeView の初期化時	初期化後のセットアップ、環境設定の読み込み
`DataBound`	データバインディングの完了時	既定のノードを自動展開、データの検証
`NodeSelected`	ノードを左クリックしたとき	ノードの詳細を読み込み、アクションを有効化
`NodeClicked`	ノードをクリックしたとき	シングルクリックとダブルクリックを区別
`NodeExpanded`	ノードを展開したとき	子ノードを読み込み（オンデマンド読み込み）
`NodeCollapsed`	ノードを折りたたんだとき	任意：子ノードをメモリから解放
`NodeEditing`	編集モードに入る前	権限を検証し、編集を防止
`NodeEdited`	編集を確定したとき	新しいテキストを検証し、サーバーに保存
`OnNodeDragStart`	ドラッグを開始したとき	制限対象のノードのドラッグを防止
`NodeDropped`	ドロップが完了したとき	サーバー上の階層を更新
`NodeChecking`	チェックボックスを変更する前	制限対象のノードへのチェックを防止
`NodeChecked`	チェックボックスを変更したとき	関連データを更新し、アクションを実行
`DataSourceChanged`	データソースが更新されたとき	フィルターを再適用し、計算を更新
`OnActionFailure`	アクションが失敗したとき（API エラー）	エラーから復旧し、通知を表示
`OnKeyPress`	キーを押したとき	キーボードショートカットを実装（Delete、F2 など）

よく使われるパターン

パターン 1：基本的な選択

<SfTreeView TValue="Item" @bind-SelectedNodes="@SelectedIds">
    <TreeViewFieldsSettings TValue="Item" DataSource="@Items" />
    <TreeViewEvents TValue="Item" NodeSelected="OnSelect"></TreeViewEvents>
</SfTreeView>

@code {
    string[] SelectedIds = Array.Empty<string>();
    void OnSelect(NodeSelectEventArgs args) => Console.WriteLine(args.NodeData.Text);
}

パターン 2：複数選択

<SfTreeView TValue="Item" AllowMultiSelection="true" @bind-SelectedNodes="@SelectedIds">
    <TreeViewFieldsSettings TValue="Item" DataSource="@Items" />
</SfTreeView>

パターン 3：オンデマンド読み込み

void OnNodeExpanded(NodeExpandEventArgs args)
{
    if (args.NodeData.HasChild && args.NodeData.Child == null)
    {
        // Load children from API
        args.NodeData.Child = await FetchChildren(args.NodeData.Id);
    }
}

パターン 4：ドラッグ＆ドロップ

<SfTreeView TValue="Item" AllowDragAndDrop="true">
    <TreeViewFieldsSettings TValue="Item" DataSource="@Items" />
    <TreeViewEvents TValue="Item" NodeDropped="OnDropped"></TreeViewEvents>
</SfTreeView>

void OnDropped(DragAndDropEventArgs args) => UpdateHierarchy(args);

パターン 5：ノードの編集

<SfTreeView TValue="Item" AllowEditing="true" DoubleClickAction="DoubleClickAction.Edit">
    <TreeViewFieldsSettings TValue="Item" DataSource="@Items" />
    <TreeViewEvents TValue="Item" NodeEdited="OnEdited"></TreeViewEvents>
</SfTreeView>

void OnEdited(NodeEditEventArgs args) => SaveChanges(args.NodeData);

パターン 6：チェックボックス

<SfTreeView TValue="Item" AllowCheckBoxes="true" ChildChecking="ChildCheckState.Both">
    <TreeViewFieldsSettings TValue="Item" DataSource="@Items" />
</SfTreeView>

var checked = treeRef.GetAllCheckedNodes();