syncfusion-aspnetcore-grid

Syncfusion ASP.NET Core Grid

Syncfusion ASP.NET Core Grid は、表形式のデータを表示および操作するための、包括的で機能豊富なコンポーネントです。データバインディング、ページング、並べ替え、フィルタリング、グループ化、編集、エクスポート、スクロールモード、行／列のカスタマイズ、高度な状態管理など、豊富な機能を備えており、あらゆる規模や複雑さのデータセットを効率的に処理できます。

⚠️ セキュリティと信頼境界

• Grid スキルは、リモートデータにアクセスしません。
• 外部 API とのやり取りはすべて、このスキルの信頼境界外にある別の DataManager スキルが処理します。

目次

• このスキルの使用場面
• コンポーネントの概要
• 機能／スキルのナビゲーションガイド
• クイックスタートの例

このスキルの使用場面

次のような場合に Syncfusion ASP.NET Core Grid を使用します。

• ASP.NET Core アプリケーションで、行と列を使って表形式のデータを表示する
• ページング、仮想スクロール、または無限スクロールを使って大規模なデータセットを効率的に処理する
• 単一または複数の列で並べ替え、フィルタリング、検索を有効にする
• 複数の編集モード（Inline、Batch、Dialog）でデータをインライン編集する
• カスタマイズしてデータを Excel または PDF 形式にエクスポートする
• 集計や計算を使ってデータをグループ化して集計する
• テンプレートやスタイルを使って行やセルをカスタマイズする
• 複雑な列構成を管理する（固定列、セルの結合、並べ替え、サイズ変更）
• 数千件のレコードを表示する際にパフォーマンスを最適化する
• ユーザーの設定や構成のためにグリッドの状態を保持する
• 画面サイズに応じたレスポンシブなデータビューを提供する

コンポーネントの概要

Grid コンポーネントは、次の機能を提供します。

• データバインディング：ローカルコレクション、リモートデータソース、DataManager 連携をサポート
• ページング：カスタマイズ可能なページサイズとナビゲーションによる、サーバー側またはクライアント側のページネーション
• 並べ替え：単一列および複数列の並べ替え
• フィルタリング：複数のフィルターモード（FilterBar、FilterMenu、Excel のようなフィルター）
• 検索：列を横断したグローバル検索
• グループ化：集計を伴う列ごとのデータのグループ化
• 選択：チェックボックスに対応した行、セル、列の選択
• 編集：検証とテンプレートに対応した Inline、Batch、Dialog モード
• 集計：Sum、Average、Count、Min、Max に対応し、フッター、グループ、キャプションに表示
• エクスポート：テンプレートとカスタマイズに対応した Excel および PDF エクスポート
• スクロール：Standard、Virtual、Infinite のスクロールモード
• 行のカスタマイズ：テンプレート、詳細ビュー、ドラッグ＆ドロップ、固定、セルの結合
• 列のカスタマイズ：テンプレート、サイズ変更、並べ替え、固定、セルの結合
• パフォーマンス：大規模なデータセット向けに最適化されたレンダリング
• レスポンシブデザイン：画面サイズに応じたアダプティブなレイアウト

サーバー側 Grid 構成の必須ルール

重要：ASP.NET Core Grid を最適なパフォーマンスと正確性で構成するには、次のルールに従ってください。

ルール 1：DataManager アダプターの構成

アダプターは、Grid がサーバーバックエンドと通信する方法を決定します。各リクエストの種類（読み取り、作成、更新、削除）には、固有の URL マッピング要件があります。

アダプター	バックエンド	用途
UrlAdaptor	汎用 HTTP エンドポイント	標準的な規約に従うシンプルな REST API
ODataAdaptor	OData v4 サービス	Microsoft ODATA、SAP サービス
ODataV4Adaptor	OData v4（新しいバージョン）	最新の ODATA エンドポイント
WebApiAdaptor	ASP.NET Web API	ASP.NET Core API コントローラー
GridAdaptor	Syncfusion GridAdaptor	Syncfusion 組み込みのバックエンド規約

---

📄 アダプターの完全なリファレンス： references/adaptors.md

---

ルール 2：状態管理のための EnablePersistence

並べ替え、フィルタリング、グループ化、ページング、列の順序などのグリッド状態を保持するには、永続化を有効にします。

<ejs-grid id="Grid" allowPaging="true" enablePersistence="true">
    
</ejs-grid>

⚠️ ルール：グリッドで状態管理を使用する場合は、enablePersistence="true" が必要です。

ルール 3：編集時の主キー設定

キー列には isPrimaryKey="true" 属性が必要です。設定しないと、編集はエラーも表示されずに失敗します。

<e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true"></e-grid-column>

機能／スキルのナビゲーションガイド

はじめにとセットアップ

📄 参照: references/getting-started.md

• NuGet パッケージのインストール
• タグヘルパーの登録
• CSS とスクリプトのセットアップ
• グリッドの基本的な初期化
• データバインディングの基礎

データバインディング

📄 参照: references/data-binding.md

• ローカルデータのバインディング（IEnumerable、List、DataTable）
• DataManager を使用したリモートデータ（OData、WebAPI）
• 読み込みインジケーター
• 動的なデータの更新

列の設定

📄 参照: references/columns.md

• 列の定義とプロパティ
• 列の種類（文字列、数値、日付、ブール値、チェックボックス）
• 列幅と書式設定
• 列テンプレートとカスタムレンダリング
• 列の機能（セル結合、並べ替え、サイズ変更）
• 外部キー列
• スタックヘッダー

データ集計

📄 参照: references/aggregates.md

• フッター集計（Sum、Avg、Count、Min、Max）
• グループフッターの集計
• グループキャプションの集計
• カスタム集計関数
• リアクティブな集計の更新

ナビゲーションとページネーション

📄 参照: references/paging.md

• ページネーションの有効化と設定
• ページサイズの設定
• ナビゲーションとページ変更
• 外部ページネーション

データの並べ替え

📄 参照: references/sorting.md

• 並べ替えの有効化（単一列および複数列）
• 初期の並べ替え設定
• カスタム並べ替え比較関数
• 並べ替えイベント

フィルタリング

まずはこちら: 📄 references/filter-setup.md を参照 — フィルタリングを有効にして、フィルターの種類（FilterBar、Menu、Excel、CheckBox）を選択します

種類を選択:

• 📄 references/filter-types.md を参照 — すべてのフィルターの種類：FilterBar（インラインテキスト）、Menu（演算子）、Excel（チェックボックス）
• 📄 references/filter-operators.md を参照 — すべてのフィルター演算子、構文、ワイルドカード、AND/OR ロジック

検索

📄 参照: references/searching.md

• グリッドの検索機能
• 列を横断したグローバル検索
• 検索の設定

データのグループ化

📄 参照: references/grouping.md

• 列によるグループ化の有効化
• 複数列によるグループ化
• キャプションテンプレート
• グループフッターの集計
• 遅延読み込みによるグループ化

選択

📄 参照: references/selection.md

• 行、セル、列の選択モード
• チェックボックスによる選択
• 複数選択の処理
• 選択イベント

編集

📄 参照: references/editing.md

• 編集の有効化（allowEditing、allowAdding、allowDeleting）
• 編集モード：Inline、Batch、Dialog
• 編集のトリガー（ダブルクリック、ツールバー）
• カスタム編集テンプレート
• 検証ルール
• サーバー側でのデータ永続化

行の機能

📄 参照: references/row.md

• 行テンプレート
• 詳細テンプレート（展開／折りたたみ）
• 行のドラッグ＆ドロップ
• 行の固定
• 行のセル結合

ツールバー

📄 参照: references/tool-bar.md

• 組み込みのツールバー項目
• カスタムツールバーボタン
• ツールバーイベント

Excel へのエクスポート

📄 参照: references/excel-export.md

• Excel エクスポートのセットアップ
• エクスポートのオプションとカスタマイズ
• テンプレートを使用したエクスポート
• サーバー側でのエクスポート

PDF へのエクスポート

📄 参照: references/pdf-export.md

• PDF エクスポートのセットアップ
• ヘッダーとフッター
• エクスポートのオプションとカスタマイズ
• テンプレートを使用したエクスポート
• サーバー側でのエクスポート

印刷

📄 参照: references/print.md

• グリッドの印刷
• 印刷テンプレート
• 印刷のカスタマイズ

スタイルと外観

📄 参照: references/style-and-appearance.md

• CSS のカスタマイズ
• テーマとダークモード
• インラインスタイルとクラス
• カスタム配色

固定とピン留め

📄 参照： references/frozen.md

• 列の固定
• 行の固定
• 行のピン留め
• 固定列の動作

スクロールモード

📄 参照： references/scrolling.md

• 標準スクロール
• 仮想スクロール（パフォーマンスの最適化）
• 無限スクロール
• スクロールバーと高さの設定

階層構造とネストされたデータ

📄 参照： references/hierarchy-grid.md

• 親子データ構造
• 子グリッドの設定
• 展開と折りたたみの動作
• 詳細行テンプレート
• 子データの遅延読み込み

コンテキストメニュー

📄 参照： references/context-menu.md

• 組み込みのコンテキストメニュー項目
• カスタムコンテキストメニュー
• コンテキストメニューイベント

セルの機能

📄 参照： references/cell.md

• セルテンプレート
• イベントによるセルのカスタマイズ
• カスタムセル属性
• セルのツールチップ

クリップボード操作

📄 参照： references/clipboard.md

• コピーと貼り付け機能
• ヘッダー付きコピー
• カスタム区切り文字

設定管理

📄 参照： references/global-local.md

• グリッドのグローバル設定
• ローカル列設定

状態管理

📄 参照： references/state-management.md

• グリッド状態の永続化
• 状態の保存と復元
• ローカルストレージ

⚠️ ルール：グリッドで状態管理を使用する場合は、enablePersistence="true"を有効にする必要があります。

データ検証

📄 参照： references/validation.md

• 組み込みの検証ルール
• カスタム検証ロジック
• 動的検証
• サーバーサイド検証
• エラー処理

コマンド列と行アクション

📄 参照： references/command-column.md

• 組み込みコマンド（編集、削除、保存、キャンセル）
• カスタムコマンドボタン
• ロールベースおよびステータスベースのコマンド
• コマンドクリックイベント
• 条件付きコマンドの表示
• CSSスタイルとアイコン

ローカライズと国際化

📄 参照： references/localization.md

• 多言語サポート（60以上の言語）
• ロケールの設定とカルチャの構成
• 数値、日付、通貨の書式設定
• RTLサポート（アラビア語、ヘブライ語、ペルシア語）
• カスタムローカライズと翻訳
• 言語切り替え機能の実装

レスポンシブデザインとモバイル

📄 参照： references/adaptive.md

• モバイル向けアダプティブUIの有効化
• フィルタリング／編集用の全画面ダイアログ
• モバイルに最適化されたレイアウト

📄 参照： references/responsive-design.md

• レスポンシブなグリッドレイアウト
• モバイルでの列の表示設定
• タッチ操作に適したインタラクション
• モバイルのブレークポイント

APIリファレンスとプロパティ

📄 参照： references/properties-configuration.md

• カテゴリ別に整理されたすべての設定可能なプロパティ
• 素早く検索できるクイックリファレンステーブル
• 各プロパティの使用場面
• 設定要件

プログラム制御（メソッド）

📄 参照： references/programmatic-api.md

• カテゴリ別のグリッドメソッド（データ、行、列、並べ替え、フィルター、グループ化、ページ、編集、エクスポート）
• メソッドのシグネチャとパラメーター
• 戻り値と使用パターン
• サーバーサイドでのメソッド呼び出し

イベント通信（イベント）

📄 参照： references/events-catalog.md

• タイミングとユースケースを含むすべてのGridイベント
• アクションのキャンセルや変更に使用するActionBeginイベント
• リアクティブな操作に使用するActionCompleteイベント
• エラー処理に使用するActionFailureイベント
• アクションを特定するためのargs.requestTypeの使用

データ接続とアダプター

📄 参照： references/adaptors.md

• バックエンド統合向けの5種類以上のアダプター
• UrlAdaptor、ODataV4Adaptor、WebApiAdaptor
• カスタムアダプターとRemoteSaveAdaptor
• バックエンドの設定例（C#、Node.js）
• リクエスト／レスポンスの形式仕様
• エラー処理とアダプターの比較

パフォーマンスの最適化

📄 参照： references/performance.md

• 10,000件以上のレコードに対応する仮想スクロール
• 無限スクロールと段階的な読み込み
• メモリ管理とクリーンアップの手法
• バンドルサイズの最適化
• イベントのデバウンスとスロットリング
• パフォーマンスのベンチマーク

アクセシビリティとコンプライアンス

📄 参照： references/accessibility.md

• WCAG 2.2およびSection 508への準拠
• WAI-ARIAの実装とスクリーンリーダー
• キーボード操作（Tab、矢印、Enter、Escape）
• 色のコントラストとフォーカス管理
• アクセシビリティのテストツール
• セマンティックHTMLの実践

クイックスタートの例

@* ~/Pages/_ViewImports.cshtml *@
@addTagHelper *, Syncfusion.EJ2

@* ~/Pages/Index.cshtml *@
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowPaging="true" allowSorting="true" allowFiltering="true">
    <e-grid-pagesettings pageSize="10"></e-grid-pagesettings>
    <e-grid-columns>
        <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" width="120" textAlign="Right"></e-grid-column>
        <e-grid-column field="CustomerID" headerText="Customer ID" width="150"></e-grid-column>
        <e-grid-column field="ShipCity" headerText="Ship City" width="150"></e-grid-column>
        <e-grid-column field="OrderDate" headerText="Order Date" format="yMd" width="150"></e-grid-column>
        <e-grid-column field="Freight" headerText="Freight" format="C2" textAlign="Right" width="120"></e-grid-column>
    </e-grid-columns>
</ejs-grid>

// Controller / PageModel
public IActionResult Index()
{
    ViewBag.DataSource = OrdersDetails.GetAllRecords();
    return View();
}