syncfusion-angular-grid

Syncfusion Angular Grid

Syncfusion の Angular Grid コンポーネントを使用して、強力で豊富な機能を備えたデータグリッドを実装するための包括的なガイドです。このスキルでは、基本的なデータバインディングから、仮想スクロール、階層データ、状態管理、複数形式でのエクスポートなどの高度な機能まで、グリッドの機能をあらゆる側面から扱います。

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

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

目次

• このスキルを使用する場面
• TreeGrid と Grid：選択ガイド
• 重要な API ルールと要件
• 機能ガイド
• クイックスタートの例
• 一般的なパターン
• 主要なプロパティと設定
• 一般的なユースケース

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

次のような場合に、このスキルを使用します。

• 表形式のデータを表示する — 構造化データを読み込み、表形式で表示する
• データ操作を有効にする — 大規模なデータセットを並べ替え、フィルタリング、検索、ページネーションする
• 編集機能を実装する — 検証機能を備えてレコードを追加、更新、削除する
• 列をカスタマイズする — 列のプロパティ、テンプレート、レイアウトを設定する
• データをエクスポートする — Excel、PDF、または印刷に適したレポートを生成する
• 高度なシナリオに対応する — 階層データ、仮想スクロール、状態の永続化に対応する
• スタイルを適用する — グリッドにテーマを適用し、外観やスタイル固有の要素をカスタマイズする
• パフォーマンスを最適化する — 大規模なデータセット向けに無限スクロールや仮想スクロールを実装する

TreeGrid と Grid：選択ガイド

要件	TreeGrid を使用	Grid を使用
データ構造	階層型／ツリー型／入れ子型	フラット／表形式
親子関係	✅ ネイティブでサポート	❌ なし（詳細テンプレートを使用）
行の展開／折りたたみ	✅ 標準搭載	❌ なし
入れ子の集計	✅ 子要素を含む	✅ フラットデータのみ
インデント／インデント解除操作	✅ はい	❌ いいえ
列のグループ化	❌ なし（Grid を使用）	✅ はい
パフォーマンス（10 万行以上）	✅優秀	✅ 優秀
ユースケース	組織図、ファイルシステム、部品表	注文、請求書、リスト

重要な API ルールと要件

Grid に組み込まれている API（137 以上のメソッド、65 以上のイベント、95 以上のプロパティ）を使用するには、アクセスパターンを厳守する必要があります。

⚠️ API を適切に使用するための詳細なルールは、リファレンスガイドに記載されています — 必要に応じて、以下のセクションを確認してください。

• 📄 プロパティリファレンス → references/grid-properties.md — カテゴリ別に整理された、設定可能な 95 以上のプロパティ
• 📄 メソッドリファレンス → references/grid-methods.md — データ操作、選択、並べ替え、フィルタリングなどに使用する 137 以上のメソッド
• 📄 イベントリファレンス → references/grid-events.md — ライフサイクル管理、ユーザー操作、データ変更のための 65 以上のイベント
• 📄 プログラムによる制御 → references/programmatic-api.md — @ViewChild の要件、メソッドのパラメーター、非同期処理、更新パターンについて説明します
• 📄 イベント処理 → references/events-catalog.md — イベントシグネチャ、タイミング、キャンセル、描画イベントの制限
• 📄 モジュールシステム → references/modules.md — 機能メソッドで必要となるサービスのインジェクション
• 📄 選択 → references/selection.md — 選択メソッドの前提条件
• 📄 バックエンド統合 → references/adaptors.md

---

機能ガイド

はじめにとセットアップ

📄 参照先： references/getting-started.md

• インストールとパッケージのセットアップ
• 基本的なグリッドの初期化
• CSS のインポートとテーマ
• 最小限の動作例

データ管理

📄 参照： references/data-binding.md

• ローカルおよびリモートのデータバインディング
• データソースの設定
• API 連携
• リアルタイムのデータ更新

列の設定

📄 参照： references/columns.md

• 列のプロパティと型
• 列テンプレート
• 外部キー列
• 列のレンダリングオプション

関連 — 列の高度な機能：
📄 参照： references/context-menu.md（列のコンテキストメニュー）

行の管理とテンプレート

📄 参照： references/row.md

• 行のプロパティとイベント
• 行テンプレート
• 詳細行テンプレート
• 行の結合

選択と操作

📄 参照： references/selection.md

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

データ操作

📄 参照： references/filtering.md

• フィルターバーとフィルターメニュー
• Excel のようなフィルタリング
• カスタムフィルター
• プログラムによるフィルタリング

📄 参照： references/sorting.md

• 単一列および複数列の並べ替え
• カスタムの並べ替え順
• 並べ替えイベント

📄 参照： references/searching.md

• 全体検索機能
• 列をまたいだ検索
• 検索アルゴリズム

📄 参照： references/paging.md

• ページネーションの設定
• ページサイズの設定
• ページ変更イベント

編集と検証

📄 参照： references/editing.md

• 編集の種類（インライン、ダイアログ、一括）
• 編集テンプレートとカスタムエディター
• 組み込みバリデーター（必須、最小値、最大値、パターン）
• 検証ルールとエラーメッセージ
• サーバーへの変更の保存

⚠️ 重要： キー列には [isPrimaryKey]="true" が必須です。これがないと、エラーが発生しないまま編集に失敗します。

グループ化と集計

📄 参照： references/grouping.md

• 列のグループ化
• 遅延読み込みによるグループ化
• キャプションテンプレート

📄 参照： references/aggregates.md

• 集計行
• カスタム集計関数
• フッター集計

エクスポートとレポート

📄 参照： references/excel-export.md

• Excel 形式へのエクスポート
• エクスポートのオプションとカスタマイズ
• エクスポートイベント

📄 参照： references/pdf-export.md

• PDF へのエクスポート
• PDF テンプレートと書式設定
• ヘッダーとフッターの設定

📄 参照： references/print.md

• 印刷機能
• 印刷テンプレート
• 印刷イベント

スタイルと UI のカスタマイズ

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

• テーマの選択
• CSS のカスタマイズ
• 特定の領域（ヘッダー、行、セル）のスタイル設定
• カスタム CSS クラス

📄 参照： references/toolbar.md

• ツールバー項目と設定
• カスタムツールバーボタン
• ツールバーイベントとクリックハンドラー

📄 参照： references/clipboard.md

• コピー／貼り付け機能
• クリップボードイベント
• クリップボードの選択管理

列の高度な機能

📄 参照： references/frozen.md

• 列の固定
• 複数列の固定
• 固定位置の設定

⚠️ パフォーマンスに関する警告： rowDataBound と queryCellInfo はレンダリング／スクロールのたびに実行されます。これらの内部で API を呼び出すことは絶対に避けてください。 ⚠️ 競合のリスク： 同じフィールドを対象に、列の [template] と rowDataBound ハンドラーの両方を追加しないでください。スタイルが重複して競合します。

セルと行の機能

📄 参照： references/cell.md

• セルの編集と選択
• セルテンプレート
• セルの結合
• セルレベルのイベント

コンテキストと操作

📄 参照： references/context-menu.md

• コンテキストメニュー項目
• カスタムコンテキストメニュー
• コンテキストメニューイベント
• デフォルトメニューの設定

高度な機能

📄 参照： references/scrolling.md

• 1K～100K件以上のレコードに対応する仮想スクロール
• 継続的に読み込む無限スクロール
• 固定ヘッダー
• スクロールのパフォーマンス最適化

⚠️ 重要： height は必須です。指定しないと、エラーが発生することなくスクロールが無効になります。 ⚠️ 互換性なし： enableVirtualization または enableInfiniteScrolling を allowPaging と組み合わせないでください。予測できない結果になります。

行数	モード	主な設定
1,000 未満	allowPaging	Page モジュール
1K～100K	enableVirtualization + height	VirtualScroll、ページングなし
継続読み込み	enableInfiniteScrolling + height	InfiniteScroll
グループ化された 100K 以上	enableVirtualization + lazyLoadGrouping	VirtualScroll、Group

📄 参照： references/hierarchy-grid.md

• マスター詳細グリッド
• 子グリッドの設定
• ネストされたデータ／階層データ
• 詳細行テンプレート
• 子データの遅延読み込み

📄 参照： references/state-management.md

• グリッドの状態（列、並べ替え、フィルター）の保存
• グリッドの状態の復元
• 状態の永続化オプション

📄 参照： references/adaptive.md

• レスポンシブ／モバイルモード
• アダプティブレイアウト
• タッチ操作

📄 参照： references/global-local.md

• キーボードショートカットとナビゲーション
• グローバル設定とローカル設定
• アクセシビリティ設定

モジュールシステムとアーキテクチャ

📄 参照： references/modules.md

• グリッドのモジュールアーキテクチャと 23 以上の機能サービス
• サービス間の依存関係と関連性
• コンポーネントデコレーターでのモジュールインジェクションパターン
• 選択的なインポートによるバンドルの最適化
• モジュールの組み込みによるパフォーマンスへの影響

データ接続とアダプター

📄 参照： references/adaptors.md

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

パフォーマンスの最適化

📄 参照： references/performance.md

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

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

📄 参照： references/accessibility.md

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

データ検証

📄 参照： references/validation.md

• 組み込みバリデーター（必須、最小、最大、パターン）
• カスタム検証関数
• サーバー確認による非同期検証
• 検証イベントとエラー表示
• ASP.NET によるサーバーサイド検証
• 列の種類ごとの検証ルール

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

📄 参照： references/command-column.md

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

ローカライズと国際化

📄 参照： references/localization.md

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

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

📄 参照： references/responsive-design.md

• モバイル／タブレット／デスクトップ向けのアダプティブ UI
• レスポンシブメディアクエリとブレークポイント
• 列の表示／非表示ルール
• タッチ操作（スワイプ、長押し）
• モバイル最適化の手法
• デバイス固有のスタイル設定パターン

プログラムによる制御

📄 参照： references/programmatic-api.md

• プログラムから呼び出せるメソッドの全カタログ
• イベントプロパティのリファレンス
• 列の動的制御
• setProperties() の例、エクスポートフック、機能間の連携

イベント通信

📄 参照： references/events-catalog.md

• アクションの実行前にキャンセルまたは変更するには、actionBegin を接続します（args.cancel = true、args.data.field = value）
• 実行後に処理（API 呼び出し、トースト表示、更新、ツールバーの復元）を行うには、actionComplete を接続します
• エラー処理には actionFailure を必ず接続します
• args.requestType を使用してアクションを特定します。イベントカタログの requestType テーブルを参照してください

上級チュートリアルと実践的なパターン

📄 参照： references/advanced-tutorials.md

• リアルタイムデータ更新（WebSocket、SignalR）
• フィルタリングを使ったマスター詳細表示
• 複雑な計算と累計
• 複雑な条件を使った高度なフィルタリング
• カスタムテーマとテーマの切り替え
• パフォーマンス監視の手法

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

📄 参照： references/grid-properties.md

• プロパティの概要
• データの基本プロパティ
• カテゴリ別のプロパティ構成
• 設定リファレンス

API リファレンス - メソッド

📄 参照： references/grid-methods.md

• メソッドの概要
• データ操作メソッド
• メソッドのパラメーターとシグネチャ
• 戻り値の型と非同期処理

API リファレンス - イベント

📄 参照： references/grid-events.md

• イベントの概要
• データイベント
• イベントのライフサイクルとタイミング
• イベントの引数とプロパティ

テストと品質保証

📄 参照： references/test-case.md

• 単体テスト
• 統合テスト
• テスト戦略
• テストケースの例

クイックスタートの例

import { Component, OnInit } from '@angular/core';
import { GridComponent } from '@syncfusion/ej2-angular-grids';

interface Employee {
  EmployeeID: number;
  FirstName: string;
  LastName: string;
  Title: string;
  HireDate: Date;
  ReportsTo: number;
  Salary: number;
}

@Component({
  selector: 'app-grid',
  template: `
    <ejs-grid [dataSource]="data" [allowPaging]="true" 
              [pageSettings]="{ pageSize: 12 }"
              [allowSorting]="true" 
              [allowFiltering]="true">
      <e-columns>
        <e-column field="EmployeeID" headerText="ID" width="100"></e-column>
        <e-column field="FirstName" headerText="First Name" width="120"></e-column>
        <e-column field="LastName" headerText="Last Name" width="120"></e-column>
        <e-column field="Title" headerText="Title" width="150"></e-column>
        <e-column field="HireDate" headerText="Hire Date" type="date" 
                  format="yMd" width="130"></e-column>
        <e-column field="Salary" headerText="Salary" type="number" 
                  format="C2" width="120"></e-column>
      </e-columns>
    </ejs-grid>
  `
})
export class GridComponent implements OnInit {
  data: Employee[] = [];

  ngOnInit() {
    this.loadEmployeeData();
  }

  loadEmployeeData() {
    // Load your data here
    this.data = [
      { EmployeeID: 1, FirstName: 'Nancy', LastName: 'Davolio', Title: 'Sales Representative', 
        HireDate: new Date(1992, 4, 1), ReportsTo: 2, Salary: 60000 },
      { EmployeeID: 2, FirstName: 'Andrew', LastName: 'Fuller', Title: 'Vice President Sales', 
        HireDate: new Date(1992, 8, 14), ReportsTo: null, Salary: 97000 },
      // ... more data
    ];
  }
}

よくあるパターン

パターン 1：ソート、フィルタリング、ページングを備えたデータグリッド

ソート、フィルタリング、ページングを組み合わせて、包括的なデータ探索を実現します。

<ejs-grid [dataSource]="data" 
          [allowSorting]="true" 
          [allowFiltering]="true" 
          [allowPaging]="true"
          [pageSettings]="{ pageSize: 20 }">
  <e-columns>
    <e-column field="EmployeeID" headerText="ID" width="100"></e-column>
    <e-column field="FirstName" headerText="First Name" width="120"></e-column>
    
  </e-columns>
</ejs-grid>

パターン 2：検証機能付きインライン編集

フォーム検証機能付きのインライン編集を有効にします。

<ejs-grid [dataSource]="data" 
          [editSettings]="{ allowEditing: true, allowAdding: true, mode: 'Normal' }"
          [toolbar]="['Add', 'Edit', 'Delete', 'Update', 'Cancel']">
  <e-columns>
    <e-column field="EmployeeID" headerText="ID" [isPrimaryKey]="true" 
              width="100"></e-column>
    <e-column field="FirstName" headerText="First Name" 
              [validationRules]="{ required: true }" width="120"></e-column>
    
  </e-columns>
</ejs-grid>

パターン 3：PDF と Excel へのエクスポート

ツールバーから PDF と Excel の両方へのエクスポートを有効にします。

<ejs-grid [dataSource]="data" 
          [toolbar]="['PdfExport', 'ExcelExport']"
          [allowPdfExport]='true'
          [allowExcelExport]='true'
          (toolbarClick)='toolbarClick($event)'>
  <e-columns>
    
  </e-columns>
</ejs-grid>

パターン 4：大規模データセット向けの仮想スクロール

仮想スクロールを使ってパフォーマンスを最適化します。

<ejs-grid [dataSource]="largeDataset" 
          [enableVirtualization]="true"
          [pageSettings]="{ pageSize: 50 }">
  <e-columns>
    
  </e-columns>
</ejs-grid>

主なプロパティと設定

プロパティ	型	目的	一般的な値
dataSource	Array/DataManager	グリッドデータ	Employee[]、RemoteDataBinding
allowSorting	boolean	ソートを有効化	true、false
allowFiltering	boolean	フィルタリングを有効化	true、false
allowPaging	boolean	ページネーションを有効化	true、false
allowGrouping	boolean	グループ化を有効化	true、false
editSettings	object	編集設定	{ mode: 'Inline' }
pageSettings	object	ページングのオプション	{ pageSize: 12 }
enableVirtualization	boolean	仮想スクロール	true、false
allowExcelExport	boolean	Excel エクスポート	true、false
allowPdfExport	boolean	PDF エクスポート	true、false
toolbar	array	ツールバー項目	['Add', 'Edit', 'Delete']
columns	array	列の定義	[{ field, headerText }]
height	string/number	グリッドの高さ	'400px'、'auto'

一般的な使用例

シナリオ 1：従業員名簿 必要に応じて詳細を表示できる、検索・並べ替え・フィルタリング可能な従業員リストを実装します。
→ 組み合わせ：getting-started + data-binding + columns + selection + hierarchy-grid

シナリオ 2：データ入力フォーム 検証機能を備えた、レコードの追加や編集ができるグリッドを作成します。
→ 組み合わせ：editing + validation + toolbar + filtering

シナリオ 3：売上レポートダッシュボード グループ化、集計、PDF エクスポート機能を備えた、高度にカスタマイズされたグリッドを作成します。
→ 組み合わせ：grouping + aggregates + pdf-export + style-and-appearance

シナリオ 4：リアルタイムデータモニター 仮想スクロールと状態の永続化を使用して、ストリーミングデータを表示します。
→ 組み合わせ：scrolling + state-management + data-binding + adaptive

シナリオ 5：多階層の組織図 各階層の詳細行を表示し、階層構造の組織を示します。
→ 組み合わせ：hierarchy-grid + row templates + cell styling