Syncfusion Feedback

世界をリードする企業から信頼されています

Syncfusion Trusted Companies

概要

Blazor TreeGrid は、自己参照階層(ツリー構造)データを表形式で効果的に視覚化するために使用される機能豊富なコンポーネントです。その豊かな機能セットには、データバインディング、編集、並べ替え、フィルタリング、ページング、行の集計、Excel、CSV、PDF形式へのエクスポートなど、多くの機能が含まれています。


Syncfusion Essential Studio® Blazor Tree Grid を選ぶ理由は?

Blazor Tree Grid High Performance image

高パフォーマンス

階層的にデータを表示し、最適化された設計により高いパフォーマンスが得られ、わずか数秒で 数百万件のレコード を読み込むことができます。

Blazor Tree Grid Data Binding image

シームレスなデータバインディング

JSONオOData、WCF、RESTful Webサービスなどの様々な ローカルおよびリモートデータソース とデータマネージャーの助けでシームレスにデータをバインディングします。

Blazor Tree Grid Hierarchical Grid image

自己参照型、階層型グリッド

Tree Grid は、自己参照および階層 を表形式で視覚化するように設計されています。これは親レコードと子レコードの関係を表示します。

Blazor Tree Grid Flexible Editing image

柔軟な編集

Blazor Tree Grid は、観測可能なデータで 作成、読み取り、更新、削除操作 (CRUD) を実行します。データマネージャーを使用して、JSON配列またはリモートデータサービスで編集します。

Blazor Tree Grid Adapts To Any Resolution image

あらゆる解像度に対応

Tree Grid には、高い応答性のあるレイアウト があり、デスクトップ、タッチスクリーン、スマートフォン向けに最適化された設計です。iOS、Android、または Windows OS を使用するすべてのモバイルフォンで正常に機能します。

Blazor Tree Grid Template Designs image

独自のテンプレート設計を作成

テンプレートを使用して、ユーザーは 幅広いテンプレート オプションを使用して、アプリケーションのニーズに基づいて Blazor Tree Grid でカスタムUI を作成できます。

Blazor Tree Grid Customizable Themes image

魅力的でカスタマイズ可能なテーマ

Fluent、Tailwind CSS、Bootstrap、Material、Fabric などの5つ以上の組み込みテーマを備えた最先端の設計。オンライン Theme Studio ツール を使用して、Tree Grid のテーマを簡単にカスタマイズします。

Blazor Tree Grid Global Local image

グローバライゼーションとローカライゼーション

異なるロケールのユーザーが Tree Grid を使用できるようにします 日付、通貨、数値フォーマットをユーザーの好みに合わせます。


Blazor Tree Grid コード例

わずか数行の C# コード例を使用して、Blazor Tree Grid を簡単に始めることができます。以下に示します。また、Blazor TreeGrid 例 を探索して、Blazor Tree Grid をレンダリングおよび構成する方法をご確認ください。

Edit in Blazor Playground

@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 Adaptive Ui image


Blazor TreeGrid の列

列は、Blazor Tree Grid コンポーネントでデータソースのスキーマを定義します。書式設定、列定義、列固定、列スパン、テキスト折り返し、列チューザー、列メニュー、列の並べ替え、その他の機能をサポートします。


ページング

ページング処理により、割り当てられたデータソースからデータのセグメントを表示できます。Blazor Tree Grid は組み込みペーガー UI を提供し、UI 全体をカスタマイズするオプションがあります。また、リモート Web サービスから効果的なデータ取得のための オンデマンドページング モードもあります。

Blazor TreeGrid のページング


Blazor TreeGrid の並べ替え

並べ替え

Blazor Tree Grid では、ヘッダーをクリックするだけで列を並べ替えることができます。Ctrl キー + ヘッダークリックで複数列の並べ替えが実行されます。データを昇順または降順で並べ替えることができます。


フィルタリング

フィルタリング処理により、特定の条件を満たす関連レコードのビューに役立ちます。強力な Excel ライクなフィルター機能を含む様々なフィルター タイプをサポートしています。Blazor Tree Grid フィルターを使用すると、ユーザーは適切なフィルター タイプを選択し、カスタム フィルタリング ロジックを定義し、アプリケーションのニーズに基づいてフィルタリング UI をカスタマイズできます。関連する親または子レコードを使用したフィルタリングを定義できます。

Blazor TreeGrid のフィルタリング


Blazor TreeGrid のセル選択

選択

Blazor TreeGrid では、行またはセルの選択が可能です。Ctrl キーまたは Command キーを押しながら、または プログラム的に 1 つ以上の行またはセルを選択することもできます。


Tree Grid 内の行は、データソースから各データオブジェクト情報を表します。子行の展開/折りたたみ、行の並べ替え、行のインデント/アウトデント処理による階層レベルの変更、その他多くの機能をサポートしています。

Blazor TreeGrid の行


Blazor TreeGrid の編集

編集

Blazor Tree Grid は、作成、読み取り、更新、削除 (CRUD) 操作を完全にサポートします。特定の列値を編集するための組み込みエディター コンポーネントに加えて、テンプレート サポートを使用するユーザーは、アプリケーションのニーズに適したカスタム エディター コンポーネントを作成できます。データマネージャーの助けを借りて、ビジネス オブジェクト의 リストまたはリモート データ サービスで編集操作を実行します。


行のドラッグ&ドロップ

Blazor TreeGrid では、同じツリー グリッド内または別のツリー グリッド間で行をドラッグ&ドロップできます。この機能は、データの再構成とより直感的なユーザー エクスペリエンスを実現するのに特に便利です。

Blazor TreeGrid の行ドラッグ&ドロップ


Blazor TreeGrid の集計

集計

集計機能を使用して、列値の集計を簡単に表示できます。集計は個々のサマリー行で値を表示するようにカスタマイズできます。


固定列

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

Blazor Tree Grid Freeze image


エクスポート

Blazor TreeGrid コンポーネントでの PDF、CSV、Excel 形式へのエクスポート

Excel、PDF、CSV へのエクスポート

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

Blazor TreeGrid の印刷

印刷

ユーザーがツールバーから印刷オプションを使用するか、プログラム的にデータを印刷できます。Blazor Tree Grid のすべての行をページ数に関係なく印刷するか、現在表示されているページのみを印刷します。


追加機能

行の高さを設定した Blazor TreeGrid

行の高さ

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

Blazor TreeGrid からクリップボードにコピー

クリップボードにコピー

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

コンテキストメニューを備えた Blazor TreeGrid

コンテキストメニュー

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

Blazor TreeGrid の幅と高さ

幅と高さ

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

スタック ヘッダーを備えた Blazor TreeGrid

スタック ヘッダー

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


アクセシビリティ

Blazor TreeGrid のキーボード ナビゲーション

キーボード ナビゲーション

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

Blazor TreeGrid のアクセシビリティとスクリーン リーダーのサポート

スクリーン リーダー

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

Blazor TreeGrid での右から左方向の言語の表示

右から左 (RTL)

右から左へのレンダリングにより、Tree Grid のテキストとレイアウトを右から左に表示できます。これにより、RTL 言語のユーザー エクスペリエンスとアクセシビリティが向上します。





その他のサポートされているフレームワーク

Tree Grid は React、Angular、JavaScript、Vue フレームワークで利用できます。以下のリンクを通じてそのプラットフォーム固有のオプションを探索してください:

サポートされているブラウザー

Blazor Tree Grid は Chrome、Firefox、Edge、Safari、Opera を含むすべての最新 Web ブラウザーで正常に動作します。

Blazor Tree Grid でサポートされているブラウザー

ブレイザーコンポーネント – 155以上のUIとDataVizコンポーネント

よくある質問

  • データバインディングをフレキシブルに行うことができ、Web API、OData、Entity Framework などのデータソースをサポートしています。

  • 高速な読み込み時間と豊かな UI インタラクションキーボード ナビゲーション を、サーバー側とクライアント側 (WebAssembly) の両方の Blazor アプリで実現します。

  • カスタマイズ オプション付きの多くの機能を備え、複雑で大規模なアプリケーション構築に適しています。

  • 様々な 編集モード と組み込みの検証ルールを使用した CRUD 操作。

  • シンプルな構成と API。
  • すべての最新ブラウザーをサポートしています。
  • モバイル タッチ フレンドリーかつレスポンシブ。
  • 広範な デモドキュメント および ビデオ により、Blazor Tree Grid をすばやく学習して開始できます。

Blazor Tree Grid デモ をご覧ください。これは Tree Grid をレンダリングおよび構成する方法を示します。

いいえ、これは商用製品であり、有料ライセンスが必要です。ただし、年間総収入が 100 万米ドル未満であり、開発者が 5 人以下の企業および個人向けの フリー コミュニティ ライセンス も利用できます。

当社の包括的な スタートガイド ドキュメント をご覧ください。

お客様は私たちを愛しています

優れたツール群と充実したサポートチームにより、Syncfusion® はお客様の開発時間を短縮します。
お客様の体験談の一部をご紹介します。

実際の成功事例を見る

世界中の開発者が複雑なプロジェクトを簡素化し、納期を短縮するために Syncfusion の Essential Studio を信頼しています。豊富な UI コントロール ライブラリ、強力な SDK、信頼できるサポートにより、Essential Studio はチームがエンタープライズ対応のアプリケーションを自信を持って構築できるよう支援します。

ケーススタディを探る


世界中のユーザーからの評価

無料評価バージョンをダウンロードしてアプリケーションを変革しましょう
無料トライアルのダウンロード クレジットカード不要。

受賞歴

偉大さ—自分で言うのではなく、他の人が認めるからこそ意味があります。 シンクフュージョンは以下の賞をいただきました。

Up arrow icon