Exampleに、以下のものがアップされていたのでメモメモ。
- ASPxCallback - How to load the content while scrolling - Auto page growth on scrolling down
FacebookやTwitterなどで、下までスクロールすると自動的に次ページ分のデータが表示されるのを
見たことがあると思いますが、あれと同じ事をするためのTipsです。
上記Exampleでは、以下のコントロールを利用しています。
- ASPxCallback
- ASPxLoadingPanel
- ASPxPanel
- ASPxClientUtils
上記の中で中核を担うのが、ASPxCallbackで、こいつがコールバックを担当します。
以下のようにして利用する事が多いです。
<dx:ASPxCallback ID="cbcCallback" runat="server" ClientInstanceName="cbcCallback" OnCallback="cbcCallback_Callback"> <ClientSideEvents Init="cbcInit" CallbackComplete="cbcComplete" /> </dx:ASPxCallback>
OnCallbackでコールバック時のサーバーサイドイベントハンドラを、ClientSideEvents要素のInitで初期処理、CallbackCompleteで
コールバック後のクライアント動作を指定します。クライアント側からコールバックする場合以下のようにします。
cbcCallback.PerformCallback(引数...);
後は、サンプルにもあるように現在の位置を判定して、必要な場合にコールバックを行うようにすれば
自動ページング処理が出来ます。サンプルでは、ヘルパークラスのASPxClientUtilsのメソッドを利用して
各値を取得していました。以下、http://www.devexpress.com/Support/Center/p/E3923.aspxより引用。
var windowHeight = ASPxClientUtils.GetDocumentClientHeight(); var documentHeight = document.body.clientHeight; var scrollTop = ASPxClientUtils.GetDocumentScrollTop(); var scrollDelta = documentHeight - windowHeight - scrollTop; if (scrollDelta <= 50) LoadItems();
ASPxClientUtilsは、他にもかゆいところに手が届く系のプロパティやメソッドが
用意されているので便利です。
以下、参考情報.
- ASPxCallback Class
- CallbackClientSideEvents Class
- ASPxClientUtils Class
- Client-Side Events
- Callback - Example
================================
過去の記事については、以下のページからご参照下さい。
- いろいろ備忘録日記まとめ