FlexGridでキー押下でのセル移動を制御したい

(2022年6月3日更新)

JavaScript開発ライブラリ「Wijmo(ウィジモ)」のデータグリッドコントロール「FlexGrid(フレックスグリッド)」では、 以下のようなキー押下時のセル移動についてのご要望が多く寄せられます。

  • 「Tab」キー押下時に編集不可セルをスキップしてセル移動したい
  • 「Enter」キー押下時のセル移動を縦移動ではなく、横移動にしたい

今回は、キー押下でのセル移動のカスタマイズを、FlexGridのkeydownイベントを使用して実現する方法をご紹介します。

HTMLイベントの追加

Wijmoのコントロールでマウス操作やキーボード操作を処理するには、コントロールをホストするHTML要素や、コントロールテンプレート内で定義されたHTML要素で、HTMLイベントを処理します。

キー押下でのセル移動をカスタマイズするには、FlexGridのセル移動の処理が行われる前にkeydownイベントを処理する必要があるため、下記のようにFlexGridのオブジェクトが生成される前にkeydownイベントを定義する必要があります。

document.getElementById('FlexGrid').addEventListener('keydown', function (e) {
・・・
}, true);
var flexGrid = new wijmo.grid.FlexGrid('#FlexGrid');

keydownイベントの実装方法

keydownイベントでは、まずe.keyCodeで押下されたキーを判定し、該当するキーの場合にセル移動をカスタマイズする処理を実装します。セル移動をカスタマイズした場合には、要素のイベントをキャンセルするため、e.preventDefaultメソッドを呼び出します。

例えば、Tabキー押下時に列のisReadOnlyプロパティにtrueが設定された編集不可セルをスキップしてセル移動する場合、下記のような処理を実装します。

document.getElementById('FlexGrid').addEventListener('keydown', function (e) {
  if (e.keyCode == 9) {
    var row = flexGrid.selection.row;
    var col = flexGrid.selection.col;
    if (flexGrid.columns[col + 1].isReadOnly) {
      flexGrid.select(row, col + 2), true);
      e.preventDefault();
    }
  }
}, true);

上記では、押下されたキーがTabキーの場合、移動先のセルが編集不可セルかどうかを判定し、編集不可セルの場合には次のセルに移動させています。

また、Enterキー押下時に縦方向ではなく、横方向にセル移動する場合、下記のような処理を実装します。

document.getElementById('FlexGrid').addEventListener('keydown', function (e) {
  if (e.keyCode == 13) {
    var row = flexGrid.selection.row;
    var col = flexGrid.selection.col;
    if (flexGrid.columns.length - 1 > col) {
      flexGrid.select(row, col + 1), true);
    }
    e.preventDefault();
  }
}, true);

上記では、押下されたキーがEnterキーの場合、現在の位置が右端かどうかを判定し、右端でない場合には右のセルに移動させています。

以上のように、FlexGridのkeydownイベントを使用すると、キー押下でのセル移動をカスタマイズすることが可能となります。

今回ご紹介した内容に関連するナレッジベースは以下の通りです。

[FlexGrid] キーボードナビゲーションをカスタマイズする方法
[FlexGrid] 最後(右下)のセルからTabキーでグリッド外にフォーカスを遷移する方法
[FlexGrid] Tabキー、Enterキー押下でセル選択の動作を変更する方法
[FlexGrid] Tabキー、Enterキーでのセル移動で編集不可セルをスキップする方法

さいごに

弊社Webサイトでは、製品の機能を手軽に体験できるデモアプリケーションやトライアル版も公開しておりますので、こちらもご確認ください。

また、ご導入前の製品に関するご相談、ご導入後の各種サービスに関するご質問など、お気軽にお問合せください。