This sample demonstrates how to implement automatic (on-demand) loading of items when a page's bottom is reached during scrolling the page down.
This behavior is widely used on modern and popular websites, such as facebook.com, bing.com, twitter.com, etc. This behavior is useful when there is a lot of data to be presented on a page, but it is not necessary to load and display all the data at a time since the most part of it might not be needed for a user. However, if the user scrolls the page down and is interested in seeing more data, it can be automatically loaded.
To track the moment when new data should be loaded, we handle the 'scroll' event of the browser window. When scrolling reaches the page's bottom, we generate a callback (using ASPxCallback) to obtain a new data portion from the server. Then, we add the received items to the end of the dataContainerElement DIV element.
As an example, we demonstrate how data can be passed from the server to the client using the JSProperties property, which is exposed by our AJAX-enabled web controls. In this sample, we pass the 'cpIsEnd' flag from the server to indicate that the end of a data list is reached, and the there is nothing to load.