igGrid セル編集後の値を任意の形式に変換する

igGrid でセル編集後、入力値を業務用件に応じた任意の形式に変換する場合、igGrid の editCellEnded イベントを捕捉し、業務用件に応じた処理の実装を加えます。また、必要な処理を行った結果をセルの値として反映するには、igGrid の setCellValue メソッドを利用することができます。

$(function () {
  ...

  $("#grid").igGrid({
    ...
    features: [
      {
        name: "Updating",
        editMode: "cell",
        enableAddRow: false,
        editCellEnded: function (evt, ui) {
          // セルの値
          var cellValue = ui.value;

          var newValue = /* 任意の業務用件を実装 */

          // newValue（加工後の値）を、セルに反映する。
          $("#" + ui.owner.grid.id()).igGridUpdating(
            "setCellValue",
            ui.rowID,
            ui.columnKey,
            newValue // 加工後の値
          );
        },
      },
    ],
  });
});

サンプルアプリケーション

添付のサンプルでは、editCellEnded イベント内で、全角文字が入力された場合、半角文字に変換するロジックを組み込んでいます。

リファレンス

editCellEnded イベント：https://jp.igniteui.com/help/api/2022.2/ui.iggridupdating#events:editCellEnded

setCellValue メソッド：https://jp.igniteui.com/help/api/2022.2/ui.iggridupdating#methods:setCellValue