IgrGrid – 行削除をキャンセルしたい

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

IgrGrid では、行の削除アクションが確定する直前に rowDelete イベントが発生します。このイベントのハンドラーで確認ダイアログを表示し、ユーザーが取り消しを選んだ場合に args.detail.cancel を true に設定することで、行の削除をキャンセルできます。

IgrGrid の設定

行削除の UI を表示するために IgrGridEditingActions を配置し、onRowDelete にハンドラーを紐付けます。

<IgrGrid data={employeeData} autoGenerate={false} primaryKey="id" onRowDelete={handleRowDelete}>
  <IgrActionStrip>
    <IgrGridEditingActions deleteRow={true} editRow={false}></IgrGridEditingActions>
  </IgrActionStrip>
  <IgrColumn field="name" header="Name" />
  <IgrColumn field="department" header="Department" />
  <IgrColumn field="position" header="Position" />
  <IgrColumn field="city" header="City" />
</IgrGrid>

rowDelete イベントの使用

ハンドラーの引数から削除対象の行データを取得し、確認結果に応じて args.detail.cancel を設定します。イベント引数の型は igniteui-webcomponents-grids の IgcGridComponentEventMap から取得します。

import type { IgcGridComponentEventMap } from "igniteui-webcomponents-grids";

const handleRowDelete = (args: IgcGridComponentEventMap["rowDelete"]) => {
  const name = args.detail.rowData.name;
  const confirmed = window.confirm(`${name} さんの行を削除してもよろしいですか？`);
  if (!confirmed) {
    args.detail.cancel = true;
    return;
  }
};

実行結果

アプリを実行し、いずれかの行の削除ボタンを押すと確認ダイアログが表示されます。「キャンセル」を選ぶと削除は取り消され、その行はグリッドに残ります。

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

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

npm ci
npm run dev
Tagged: