いろいろ備忘録日記

主に .NET とか Go とか Flutter とか Python絡みのメモを公開しています。

DevExpress奮闘記-098 (FacebookやTwitterみたいに最下部までスクロールしたら自動的に次のページ分を表示, How to load the content while scrolling, ASPxCallback, ASPxClientUtils)


Exampleに、以下のものがアップされていたのでメモメモ。


FacebookTwitterなどで、下までスクロールすると自動的に次ページ分のデータが表示されるのを
見たことがあると思いますが、あれと同じ事をするための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は、他にもかゆいところに手が届く系のプロパティやメソッドが
用意されているので便利です。


以下、参考情報.

================================
過去の記事については、以下のページからご参照下さい。