IgbGrid において行の操作を有効にした際、削除ボタンを押すとすぐに削除されますが、ユーザーの誤操作防止のために確認メッセージを表示したい場合があります。
本記事では、行削除時に確認ダイアログを表示させ、ユーザーが行を削除するかどうか決定する方法についてご紹介します。
IgbGrid の設定
IgbGrid の RowDeleteScript プロパティを使用して、削除時にスクリプトを実行することができます。
<IgbGrid ....
RowDeleteScript="onRowDelete"
RowEditable>
<IgbActionStrip>
<IgbGridEditingActions AddRow DeleteRow EditRow>
</IgbGridEditingActions>
</IgbActionStrip>
....
</IgbGrid>
Script の使用
RowDeleteScript を使用して、行削除時に確認ダイアログを表示するスクリプトを定義します。
本記事のサンプルでは、このスクリプトは、script.js という名前の JavaScript ファイルに保存し、Pages/_Layout.cshtml に以下のように追加しております。
<script src="~/script.js"></script>
そして、script.js ファイルに以下のコードを追加します。
igRegisterScript("onRowDelete", (args) => {
var result = window.confirm('行を削除しますか？');
if (result) {
console.log('OK がクリックされました');
}
else {
args.detail.cancel = true;
console.log('キャンセルがクリックされました');
}
}, false);
実行結果
この方法で、行削除時に確認ダイアログが表示され、ユーザーが削除を確認することができます。
