キー押下でのセル移動を制御したい（Wijmo 5のFlexGrid） | GrapeCity.devlog

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イベントを使用すると、キー押下でのセル移動をカスタマイズすることが可能となります。