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キーでのセル移動で編集不可セルをスキップする方法