IgbGrid – Enterキー押下時に次のセルへ移動したい

IgbGrid のデータセルでは、既定で Enter キーを押すとセルの編集が開始・確定されます。本記事では、GridKeydownScript プロパティを使用してこの既定動作をキャンセルし、Enter キーを押した際に編集を確定せず次のセルへフォーカスを移動する方法を紹介します。

実装で使用する 2 つの API の役割は次のとおりです。

• GridKeydownScript
  • IgbGrid のプロパティで、グリッド内でキーが押されたときに呼び出す JavaScript 処理の名前を指定する。
  • 指定した名前の処理は、あらかじめ igRegisterScript で登録しておく必要がある。
• igRegisterScript
  • Ignite UI for Blazor が提供するグローバル関数で、「名前」と「その名前が呼ばれたときに実行するコールバック関数」を対にして登録する。
  • GridKeydownScript などのプロパティは、ここで登録した名前を参照する。

実装は次の手順で行います。

手順1: IgbGrid に GridKeydownScript を設定する

IgbGrid の GridKeydownScript プロパティに、キー入力時に呼び出すスクリプト名を指定します。

<IgbGrid Data="_people"
         PrimaryKey="@nameof(Person.Id)"
         GridKeydownScript="gridEnterKeyNavigatesNextCell">
    <IgbColumn Field="@nameof(Person.Name)" ...></IgbColumn>
    ...
</IgbGrid>

手順2: igRegisterScript で Enter キーの処理を登録する

手順1 で指定したスクリプト名を、JavaScript 側で igRegisterScript を使用して登録します。登録した関数では以下の処理を書きました。

• 対象がデータセルかつ Enter キーかどうかを判定する
• 条件に一致する場合、args.cancel を true に設定し、既定の編集動作をキャンセルする
• grid.getNextCell で次のセル位置を取得する
• grid.navigateTo で取得したセルへフォーカスを移動する

igRegisterScript("gridEnterKeyNavigatesNextCell", (evtArgs) => {
    const args = evtArgs.detail;
    const target = args.target;
    const evt = args.event;
    const type = args.targetType;

    if (type !== "dataCell" || evt.key.toLowerCase() !== "enter") {
        return;
    }

    args.cancel = true;

    const grid = target.grid;
    const nextCell = grid.getNextCell(target.row.index, target.column.visibleIndex);

    grid.navigateTo(nextCell.rowIndex, nextCell.visibleColumnIndex, (obj) => {
        obj.target.activate();
    });
}, false);

実行結果

データセルにフォーカスした状態で Enter キーを押すと、セルが編集モードにならず、次のセル(行末の場合は次の行の先頭列)にフォーカスが移動します。