（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サイトでは、製品の機能を手軽に体験できるデモアプリケーションやトライアル版も公開しておりますので、こちらもご確認ください。
また、ご導入前の製品に関するご相談、ご導入後の各種サービスに関するご質問など、お気軽にお問合せください。