世界をリードする企業から信頼されています
概要
Blazor TreeGrid は、自己参照階層(ツリー構造)データを表形式で効果的に視覚化するために使用される機能豊富なコンポーネントです。その豊かな機能セットには、データバインディング、編集、並べ替え、フィルタリング、ページング、行の集計、Excel、CSV、PDF形式へのエクスポートなど、多くの機能が含まれています。
Syncfusion Essential Studio® Blazor Tree Grid を選ぶ理由は?
高パフォーマンス
階層的にデータを表示し、最適化された設計により高いパフォーマンスが得られ、わずか数秒で 数百万件のレコード を読み込むことができます。
シームレスなデータバインディング
JSONオOData、WCF、RESTful Webサービスなどの様々な ローカルおよびリモートデータソース とデータマネージャーの助けでシームレスにデータをバインディングします。
自己参照型、階層型グリッド
Tree Grid は、自己参照および階層 を表形式で視覚化するように設計されています。これは親レコードと子レコードの関係を表示します。
柔軟な編集
Blazor Tree Grid は、観測可能なデータで 作成、読み取り、更新、削除操作 (CRUD) を実行します。データマネージャーを使用して、JSON配列またはリモートデータサービスで編集します。
あらゆる解像度に対応
Tree Grid には、高い応答性のあるレイアウト があり、デスクトップ、タッチスクリーン、スマートフォン向けに最適化された設計です。iOS、Android、または Windows OS を使用するすべてのモバイルフォンで正常に機能します。
独自のテンプレート設計を作成
テンプレートを使用して、ユーザーは 幅広いテンプレート オプションを使用して、アプリケーションのニーズに基づいて Blazor Tree Grid でカスタムUI を作成できます。
魅力的でカスタマイズ可能なテーマ
Fluent、Tailwind CSS、Bootstrap、Material、Fabric などの5つ以上の組み込みテーマを備えた最先端の設計。オンライン Theme Studio ツール を使用して、Tree Grid のテーマを簡単にカスタマイズします。
グローバライゼーションとローカライゼーション
異なるロケールのユーザーが Tree Grid を使用できるようにします 日付、通貨、数値フォーマットをユーザーの好みに合わせます。
Blazor Tree Grid コード例
わずか数行の C# コード例を使用して、Blazor Tree Grid を簡単に始めることができます。以下に示します。また、Blazor TreeGrid 例 を探索して、Blazor Tree Grid をレンダリングおよび構成する方法をご確認ください。
@using Syncfusion.Blazor.TreeGrid
<SfTreeGrid DataSource="@TreeData" IdMapping="TaskID" ParentIdMapping="ParentID" TreeColumnIndex="1">
<TreeGridColumns>
<TreeGridColumn Field="TaskID" HeaderText="Task ID" Width="80" TextAlign="TextAlign.Right"></TreeGridColumn>
<TreeGridColumn Field="TaskName" HeaderText="Task Name" Width="145"></TreeGridColumn>
<TreeGridColumn Field="Duration" HeaderText="Duration" Width="100" TextAlign="TextAlign.Right"></TreeGridColumn>
<TreeGridColumn Field="Progress" HeaderText="Progress" Width="100"></TreeGridColumn>
</TreeGridColumns>
</SfTreeGrid>
@code{
public List<SelfReferenceData> TreeData { get; set; }
protected override void OnInitialized()
{
this.TreeData = SelfReferenceData.GetTree().Take(30).ToList();
}
public class SelfReferenceData
{
public static List<SelfReferenceData> tree = new List<SelfReferenceData>();
public int TaskID { get; set; }
public string TaskName { get; set; }
public String Progress { get; set; }
public int Duration { get; set; }
public int? ParentID { get; set; }
public SelfReferenceData() { }
public static List<SelfReferenceData> GetTree()
{
if (tree.Count == 0)
{
int root = -1;
for (var t = 1; t <= 10000; t++)
{
Random ran = new Random();
string progr = (ran.Next() % 3) == 0 ? "Started" : (ran.Next() % 2) == 0 ? "Open" : "In Progress";
root++;
int rootItem = tree.Count + root + 1;
tree.Add(new SelfReferenceData() { TaskID = rootItem, TaskName = "Parent task " + rootItem.ToString(), Progress = progr, Duration = ran.Next(1, 50) });
int parent = tree.Count;
for (var c = 0; c < 2; c++)
{
root++;
progr = (ran.Next() % 3) == 0 ? "In Progress" : (ran.Next() % 2) == 0 ? "Open" : "Validated";
int iD = tree.Count + root + 1;
tree.Add(new SelfReferenceData() { TaskID = iD, TaskName = "Child task " + iD.ToString(), ParentID = rootItem, Progress = progr, Duration = ran.Next(1, 50) });
}
}
}
return tree;
}
}
}アダプティブ UI レイアウト
Blazor Tree Grid のユーザーインターフェイスはカスタマイズおよび再設計され、小さい画面で優れた表示とユーザビリティを提供します。フィルター、検索、編集ダイアログはスクリーンサイズに適応します。

列
列は、Blazor Tree Grid コンポーネントでデータソースのスキーマを定義します。書式設定、列定義、列固定、列スパン、テキスト折り返し、列チューザー、列メニュー、列の並べ替え、その他の機能をサポートします。
ページング
ページング処理により、割り当てられたデータソースからデータのセグメントを表示できます。Blazor Tree Grid は組み込みペーガー UI を提供し、UI 全体をカスタマイズするオプションがあります。また、リモート Web サービスから効果的なデータ取得のための オンデマンドページング モードもあります。


並べ替え
Blazor Tree Grid では、ヘッダーをクリックするだけで列を並べ替えることができます。Ctrl キー + ヘッダークリックで複数列の並べ替えが実行されます。データを昇順または降順で並べ替えることができます。
フィルタリング
フィルタリング処理により、特定の条件を満たす関連レコードのビューに役立ちます。強力な Excel ライクなフィルター機能を含む様々なフィルター タイプをサポートしています。Blazor Tree Grid フィルターを使用すると、ユーザーは適切なフィルター タイプを選択し、カスタム フィルタリング ロジックを定義し、アプリケーションのニーズに基づいてフィルタリング UI をカスタマイズできます。関連する親または子レコードを使用したフィルタリングを定義できます。


選択
Blazor TreeGrid では、行またはセルの選択が可能です。Ctrl キーまたは Command キーを押しながら、または プログラム的に 1 つ以上の行またはセルを選択することもできます。
行
Tree Grid 内の行は、データソースから各データオブジェクト情報を表します。子行の展開/折りたたみ、行の並べ替え、行のインデント/アウトデント処理による階層レベルの変更、その他多くの機能をサポートしています。


編集
Blazor Tree Grid は、作成、読み取り、更新、削除 (CRUD) 操作を完全にサポートします。特定の列値を編集するための組み込みエディター コンポーネントに加えて、テンプレート サポートを使用するユーザーは、アプリケーションのニーズに適したカスタム エディター コンポーネントを作成できます。データマネージャーの助けを借りて、ビジネス オブジェクト의 リストまたはリモート データ サービスで編集操作を実行します。
行のドラッグ&ドロップ
Blazor TreeGrid では、同じツリー グリッド内または別のツリー グリッド間で行をドラッグ&ドロップできます。この機能は、データの再構成とより直感的なユーザー エクスペリエンスを実現するのに特に便利です。

固定列
固定列はツリー グリッドの左側または右側、またはその両側に表示され、残りのグリッド コンテンツがスクロール可能になります。主にセル値の比較に使用されます。ユーザーは列間の固定行区切り線との相互作用により、列を固定から除外できます。
エクスポート

Excel、PDF、CSV へのエクスポート
Blazor Tree Grid コンポーネントを Excel、PDF、CSV などのファイル形式で簡単にエクスポートします。
追加機能

行の高さ
行の高さは、ビューポート内に表示されるレコード数を決定する主要な要素であり、アプリケーションの UI 要件に基づいて簡単にカスタマイズできます。行の高さを条件付きで設定することも可能です。

クリップボードにコピー
クリップボード機能は、選択した行またはセルのデータをクリップボードにコピーするオプションを提供します。それぞれ Ctrl+C と Ctrl+Shift+H キーの組み合わせを使用して、ヘッダー付きおよびヘッダーなしでデータをコピーします。

コンテキストメニュー
コンテキストメニューにより、ポップアップメニューを使用して Blazor Tree Grid とのユーザーの操作が改善されます。セル、ヘッダー、またはペーザーが右クリックされたときに表示されます。組み込みの既定メニュー項目に加えて、カスタム コンテキスト メメニュー項目を追加できます。

幅と高さ
Blazor Tree Grid のサイズを幅プロパティと高さプロパティを設定することで変更できます。コンテンツが Blazor Tree Grid 要素をオーバーフローすると、水平および垂直スクロールバーが表示されます。Blazor Tree Grid が親コンテナーを満たすようにするには、ユーザーは単に高さと幅を 100% に設定するだけで済みます。

スタック ヘッダー
スタック ヘッダーにより、列ヘッダーをスタック方式でグループ化および視覚化できます。スタックできる列の数に制限はありません。ユーザーは、列がスタックされている場合でも、すべての Blazor TreeGrid アクションを実行できます。
アクセシビリティ

キーボード ナビゲーション
Blazor Tree Grid により、すべてのセルがキーボード アクセス可能になります。子行の展開または折りたたみ、並べ替え、選択、編集などの主要機能をキーボード コマンドのみで実行できます。マウスの操作は必要ありません。これにより、このコンポーネントを使用して、アクセス可能性の高いアプリケーションを作成できます。

スクリーン リーダー
Blazor TreeGrid は、完全な WAI-ARIA アクセシビリティ サポートを備えています。Blazor Tree Grid UI には、視覚的なコントラストが高い要素が含まれており、視覚障害のあるユーザーが最高の表示経験を得るのに役立ちます。また、スクリーン リーダーなどの支援技術を通じて、有効な UI 説明に簡単にアクセスできます。

右から左 (RTL)
右から左へのレンダリングにより、Tree Grid のテキストとレイアウトを右から左に表示できます。これにより、RTL 言語のユーザー エクスペリエンスとアクセシビリティが向上します。
その他のサポートされているフレームワーク
Tree Grid は React、Angular、JavaScript、Vue フレームワークで利用できます。以下のリンクを通じてそのプラットフォーム固有のオプションを探索してください:
サポートされているブラウザー
Blazor Tree Grid は Chrome、Firefox、Edge、Safari、Opera を含むすべての最新 Web ブラウザーで正常に動作します。

ブレイザーコンポーネント – 155以上のUIとDataVizコンポーネント
よくある質問
Syncfusion Essential Studio® Blazor Tree Grid を選ぶべき理由は何ですか?
データバインディングをフレキシブルに行うことができ、Web API、OData、Entity Framework などのデータソースをサポートしています。
高速な読み込み時間と豊かな UI インタラクション と キーボード ナビゲーション を、サーバー側とクライアント側 (WebAssembly) の両方の Blazor アプリで実現します。
カスタマイズ オプション付きの多くの機能を備え、複雑で大規模なアプリケーション構築に適しています。
様々な 編集モード と組み込みの検証ルールを使用した CRUD 操作。
- シンプルな構成と API。
- すべての最新ブラウザーをサポートしています。
- モバイル タッチ フレンドリーかつレスポンシブ。
Syncfusion Blazor Tree Grid のデモはどこで見つかりますか?
Blazor Tree Grid デモ をご覧ください。これは Tree Grid をレンダリングおよび構成する方法を示します。
Syncfusion Blazor Tree Grid は無料ですか?
いいえ、これは商用製品であり、有料ライセンスが必要です。ただし、年間総収入が 100 万米ドル未満であり、開発者が 5 人以下の企業および個人向けの フリー コミュニティ ライセンス も利用できます。
Syncfusion Blazor Tree Grid を使用する方法を知るにはどうすればよいですか?
当社の包括的な スタートガイド ドキュメント をご覧ください。
お客様は私たちを愛しています
受賞歴
偉大さ—自分で言うのではなく、他の人が認めるからこそ意味があります。 シンクフュージョンは以下の賞をいただきました。

