IgrGrid – 特定の条件でセル編集を制御したい

  • 公開日:
  • 最終更新日:

IgrGrid を使用して特定の条件に基づいてセルの編集を制御する方法について説明します。
例として、下図のように “Editable” の値が “false” の “Name” 列のセルのみを編集不可とします。

IgrGrid の設定

セルが編集モードに入る直前に発生する onCellEditEnter イベント を利用します。
このイベントで args.detail.cancel = true を設定することで、セルの編集をキャンセルできます。

<IgrGrid ....
  onCellEditEnter={handleCellEditEnter}
>
  ....
</IgrGrid>

編集キャンセルの処理

onCellEditEnter のイベントハンドラで、対象の列と行データを判定します。
ここでは rowData.editable === false かつ column.field === “name” の場合に編集をキャンセルします。

import type { IgrGridEditEventArgsDetail } from "@infragistics/igniteui-react-grids";
....
const handleCellEditEnter = (args: CustomEvent<IgrGridEditEventArgsDetail>) => {
  const { rowData, column } = args.detail;
  // editable が false かつ name 列の場合は編集をキャンセル
  if (!rowData.editable && column?.field === "name") {
    args.detail.cancel = true;
  }
};

こうすることで、Editable 列が false の行で Name 列を編集しようとすると、編集がキャンセルされます。

サンプルプログラムのダウンロード GitHub リポジトリはこちら

ダウンロード後、以下のコマンドで実行できます。

npm ci
npm run dev

関連ドキュメント

Tagged: