igGrid – セル編集後にグリッドの外部がクリックされたら編集を確定する

igGrid ではセルの編集が行われると、別のセルがクリックされたタイミングで変更値が確定され、編集終了のイベント editCellEnding および editCellEnded が発生します。
グリッドのセルではなく、外部要素がクリックされた際に編集を確定するには、igGrid の編集セル要素( input 要素)に blur イベントをフックアップし、セルからフォーカスが外れたタイミングで igGridUpdating の endEdit() メソッドを実行します。

ui.igGridUpdating – endEdit メソッド
https://jp.igniteui.com/help/api/2024.2/ui.iggridupdating#methods:endEdit

endEdit() はプログラムによって強制的にセルの編集を終了させるメソッドで、二つのオプション引数をとります。一つ目の update ( bool 値) は変更値を受け入れるかどうか、また二つ目の raiseEvents ( bool 値) は編集終了のイベント( editCellEnding、editCellEnded )を発生せるかどうかを制御します。

//igGridの生成
$("#grid1").igGrid(
{.....}
);

$(document).on("blur", "input.ui-igedit-input", function (event) {
	//セルからフォーカスが外れたら強制的に編集を終了させる
	$("#grid1").igGridUpdating("endEdit", true, true);
});