- 2017/01/30(月)時点の情報に基づいています -
こんにちは、インフラジスティック・ジャパン デベロッパーサポート の桐生です。
弊社のjQuery/HTML5用コントロール Ignite UI のコントロールの中で最もご利用頻度の高い igGrid のライフサイクルイベントについてご説明いたします。
Ignite UI のコントロールは、組み込みオプションでは実現できないことも、イベントを駆使することでより高度なカスタマイズを実現することができます。
特に igGrid の場合、生成時に発生するライフサイクルイベントが豊富なため、細かいレベルでの制御が可能となります。ライフサイクルイベントの発生タイミングと使いどころを押さえて、カスタマイズの幅を広げていただければと思います。
igGrid のライフサイクルイベント
https://www.igniteui.com/help/api/2016.2/ui.iggrid#events
APIリファレンスのページには計20のイベントがありますが、そのうち、
・cellClick
・cellRightClick
・columnsCollectionModified
・requestError
の4つを除いた16イベントがライフサイクルイベントに該当します。ライフサイクルというだけあって、グリッドの生成時、破棄時に発生します。
◆グリッド生成時
1. rendering
2. schemaGenerated
3. dataBinding
4. headerRendering
５. headerCellRendered
6. headerRendered
7. dataBound
8. dataRendering
9. footerRendering
10. footerRendered
11. rowsRendering
12. rowsRendered
13. dataRendered
14. rendered
15. igcontrolcreated
1 - 15 の順でイベントが発生します。よく使われるイベントとしては以下があります。
headerRendered:
グリッドのヘッダーが描画された後に発生します。ヘッダーに対してスタイルを適用したい、といった用途でよく使用されます。
また、ヘッダーセルクリック時にカスタムの処理を組み込むために、このイベントを使って、ヘッダーセルへのクリックイベントハンドラを設定する、といったことも可能です。
rowsRendered / dataRendered:
グリッドの行が描画された後に発生します。行に対してスタイルを適用したい、といった用途でよく使用されます。
rowsRendered イベントは行そのもののDOMが全て描画された直後に発生し、dataRenderedイベントはその後、グリッドの高さやスクロール、カラムの幅などのレイアウトを調整したあとに発生します。行そのものに作用させるだけで良ければ rowsRendered のタイミングで構わないと思いますが、グリッドの高さなどの情報も処理に必要な場合は dataRendered のタイミングで処理をしておいた方がより安全と思われます。
また、行に対してカスタムイベントハンドラを設定するために使用されたりします。
後述しますが、これらのイベントは、グリッド生成後も繰り返し発生することがあります。
rendered:
グリッドのすべてが描画された後に発生します。このタイミングではグリッド内のすべてのDOMにアクセスできます。ヘッダーや行に対してまとめて処理を適用したいといった場合に、このイベントで行うことが可能です。
また、グリッドの生成が完了したタイミングでアプリケーションに対して何かしらの通知を行いたい、といった用途でも使用されることがあります。
◆２回目以降 ※フィルター処理、ページング処理などが行われた場合に発生
1. dataBinding
2. dataBound
3. dataRendering // このイベントの直後に行のDOMが一旦すべて削除されます
4. rowsRendering
5. rowsRendered // このイベントの直前に新たな行のDOMがすべて描画されます
6. dataRendered
rendering(ed), headerRendering(ed), footerRendering(ed) イベントが発生しないことに注意してください。
自分もよくやってしまう間違いとして、行のスタイル変更などを rendered イベントで行ってしまうことがあります。しかし、上述の通り、フィルターやページング、ソーティング機能を使用している場合、その操作を行うと、グリッドの行の部分のDOMは一旦削除されてから再描画されるため、せっかく rendered イベントで行ったカスタマイズが消えてしまいます。
これを防ぐためには、rendered イベントの代わりに rowsRendered イベントを使用して、フィルター、ページング、ソーティングが行われるたびに毎回処理を行うようにします。
◆グリッド破棄時
1. igcontroledestroyed
グリッドの破棄時はこのイベントのみ発生します。グリッドが破棄された後の後処理として何かを行いたいという場合に使用できるかと思います。
サンプル
igGrid のライフサイクルイベントの発生順序を実際に動かして確認できるサンプルHTMLを作成致しました。HTMLファイルをブラウザで表示したのち、開発者ツールを表示させた状態でグリッドの生成/破棄をお試し頂くと、コンソール上にイベント名が出力されるのをご確認いただけます。
サンプルのダウンロード(本サンプルは Ignite UI 16.2.2040 (2017/1/30時点) で作成しました)
