ComponentOne Information

ComponentOne Studio/Wijmo/Xuniの最新情報を公開中

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

Wijmo 5のFlexGridでは、「Tabキー押下時に編集不可セルをスキップしてセル移動したい」や「Enterキー押下時のセル移動を縦移動ではなく、横移動にしたい」などのセル移動についてのご要望が多く寄せられます。今回は、キー押下でのセル移動のカスタマイズを、FlexGridのkeydownイベントを使用して実現する方法をご紹介します。

HTMLイベントの追加

Wijmo 5コントロールでマウス操作やキーボード操作を処理するには、コントロールをホストする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;[f:id:ComponentOne_JP:20170713104911p:plain]

        if (flexGrid.columns.length - 1 > col) {
            flexGrid.select(row, col + 1), true);
        }

        e.preventDefault();
    }
}, true);

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

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

≫≫ 今回ご紹介した内容に関連するナレッジベースはこちら
[FlexGrid] キーボードナビゲーションをカスタマイズする方法
[FlexGrid] Tabキーでグリッド外にフォーカスを遷移する方法
[FlexGrid] Enterキー押下で右方向に選択を移動する方法
[FlexGrid] Tabキー、Enterキーでのセル移動で編集不可セルをスキップする方法

ComponentOne