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

この記事では、行削除の確認ダイアログを表示し、ユーザーが「キャンセル」を選んだ場合には削除処理を中止する方法を紹介します。

IgxGrid の設定

rowDeleteイベントを利用すると、削除直前に処理を挟むことができます。
ここで IRowDataCancelableEventArgs の cancel プロパティを true に設定すれば、削除をキャンセルできます。

<igx-grid (rowDelete)="onRowDelete($event)" >
  <igx-action-strip>
    <igx-grid-editing-actions [deleteRow]="true">      
    </igx-grid-editing-actions>
  </igx-action-strip>
  ...
</igx-grid>

行削除キャンセルの処理

rowDelete イベントの引数には削除対象のデータが含まれています。
confirm() でユーザーに確認を取り、キャンセル時は event.cancel = true にします。

import { IGX_GRID_DIRECTIVES, IRowDataCancelableEventArgs } from '@infragistics/igniteui-angular';

....

onRowDelete(event: IRowDataCancelableEventArgs) {
  if (!confirm('Are you sure you want to delete this row?')) {
    event.cancel = true; // 削除をキャンセル
  }
}

実行結果

行削除アクションを行うと、以下のような確認ダイアログが表示されます。

• OK → 削除実行
• キャンセル → 削除中止

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

npm ci
npm run dev

関連ドキュメント

• IRowDataCancelableEventArgs | Ignite UI for Angular