はじめに
開発中のシステムで、jQueryのColorboxを使用したモーダル画面内にPQGridで作成したグリッドを表示していました。
PQGridのセル編集機能を利用し、Excelのような感覚でコピー＆ペースト（Ctrl+C / Ctrl+V）を行えるように実装を進めていましたが、想定通りに動作しない問題に遭遇しました。
調査を進める中で、当初はPQGrid側の設定を疑っていましたが、最終的には別の箇所に原因があることが分かりました。
本記事では、問題発生から原因調査までの過程を紹介します。
発生した事象
システムではjQuery Colorboxを利用してモーダル画面を表示し、その中にPQGridで作成したグリッドを配置していました。
PQGridにはセル編集機能があり、コピー＆ペーストに関する実装も行っていたため、グリッド内でCtrl+CやCtrl+Vによる編集ができる想定でした。
しかし実際に動作確認を行うと、セルの編集自体は可能であるものの、コピー＆ペースト操作が正常に動作しませんでした。
期待していた動作は以下の通りです。
- セルの値をコピーできる
- Excelなどからコピーした値を貼り付けできる
- 貼り付け後にバリデーション処理や変更イベントが実行される
ところが実際には、Ctrl+Vを実行しても値が貼り付けられず、関連するイベントも発火していないように見えました。
調査した内容
まずはPQGrid側の実装に問題があると考え、コピー＆ペースト処理に関連するイベントの動作確認を行いました。
確認したポイントは以下の通りです。
beforeValidateイベントの確認
セル編集時に実行されるbeforeValidateイベントへログを出力し、イベントが発火しているか確認しました。
beforeValidate: function (evt, ui) {
console.log("beforeValidate");
}
changeイベントの確認
値変更後に実行されるchangeイベントについても同様にログを出力して確認しました。
change: function (evt, ui) {
console.log("change");
}
確認結果
セルへ直接値を入力した場合は、beforeValidateやchangeイベントが正常に発火していました。
一方で、コピー＆ペーストを実行した場合は、これらのイベントがまったく発火していませんでした。
そのため、当初疑っていたPQGridのバリデーション処理や変更検知処理に問題があるのではなく、コピー＆ペースト操作自体が正常に受け付けられていない可能性があることが分かりました。
Colorboxを疑った理由
当初はPQGrid側の設定ミスを疑い、イベント処理やグリッド設定を中心に確認していました。
しかし調査を進める中で、同じPQGridを利用している別画面ではコピー＆ペーストが正常に動作していることに気付きました。
グリッドの設定内容やイベント定義を比較したところ、大きな差異は見つかりませんでした。
つまり、
- PQGridの設定や実装には問題がなさそう
- モーダル画面特有の制御に原因がありそう
という結論に至りました。
そこで調査対象をPQGridからColorboxへ切り替え、モーダル表示時の設定やキーボードイベント制御について確認することにしました。
調査結果
Colorboxの設定を見直したところ、モーダル表示時のキーボード操作に関連する設定が影響している可能性があると分かりました。
詳細な内部原因までは特定できませんでしたが、Colorboxの設定を変更したところコピー＆ペーストが正常に動作するようになりました。
今回の事象では、PQGrid側ではなくColorbox側の設定が影響していた可能性が高いと考えています。
同様の問題に遭遇した場合は、グリッドの実装だけでなく、モーダルライブラリ側の設定やフォーカス制御についても確認してみることをおすすめします。
学んだこと
今回の調査で、当初はPQGrid側の実装不備を疑っていました。
しかし実際には、
- 同じPQGridでも通常画面では問題なく動作していた
- コピー＆ペースト時のみイベントが発火しなかった
- Colorboxを利用している画面でのみ発生していた
という事実から、グリッドではなくモーダル側の制御に問題があることを切り分けることができました。
特に今回役立ったのは、beforeValidateやchangeイベントへログを出力して処理の到達地点を確認したことです。
ライブラリを組み合わせて利用している場合、問題が発生すると「直前に触っていたライブラリ」を疑いがちですが、まずはイベントがどこまで到達しているかを確認することで原因の切り分けがしやすくなると感じました。