下図のように IgrGrid では、通常、編集中のセルで変更を加えた後、他のセルをクリックすると、自動的に変更内容が確定（コミット）されます。
本記事では、IgrGrid のcellEditイベントを利用して、編集中のセルをクリックしてもコミットされないようにする方法を解説します。
cellEdit を使用する方法
以下のコードを使用して、セル編集イベントを制御します。
function oncellEdit(s: IgrGrid, args: IgrGridEditEventArgs): void {
// クリックされた要素がグリッドのセル要素かどうか判定
const isCellClick =
(args.detail.nativeElement as any).event.target.tagName === "IGX-GRID-CELL";
if (isCellClick) {
// セルをクリックした場合、編集のキャンセル
args.detail.cancel = true;
console.log("セル編集のコミットがキャンセルされました");
} else {
// 他の要素をクリックした場合、デフォルトの処理
console.log("セル編集のコミットが実行されます");
}
}
IgrGrid コンポーネントの構築
上記の oncellEdit 関数を使用して、IgrGrid コンポーネントを構築します
<IgrGrid ....
rowEditable
cellEdit={oncellEdit} // セル編集イベントが発生した際にoncellEdit関数を呼び出す
>
....
</IgrGrid>
これらの実装より、他のセルがクリックされても編集中のセルの編集がコミットされないようになります。
実行結果
