Endless Pagination - Load content using DevExpress ASP.NET while scrolling

Check out this solution to provide an 'endless pagination' feature to your DevExpress ASP.NET enabled websites:

A DevExpress ASP.NET Approach

You can achieve the above sample using these DevExpress ASP.NET controls:

• ASPxCallback
• ASPxLoadingPanel
• ASPxPanel
• JavaScript methods from our ASPxClientUtils object

Take a look at this code central sample here:

ASPxCallback - How to load the content while scrolling - Auto page growth on scrolling down (online demo)

I'll talk about the magic of the JavaScript code below but first, let's look at the general problem and why using an 'endless pagination' solution can help.

Large Datasets

Large datasets on the web are not uncommon anymore. So how do you deal with these large amounts of data without overwhelming the user with a ton of information at once? You paginate the data into smaller chunks:

Endless pagination or infinite scrolling

Endless pagination (or infinite scrolling) is used by many companies like 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 once since most of it may not be needed. However, load a small set of data and then if the user scrolls down the then then automatically load more data. (See the animated gif above for a sample).

Why use endless pagination?

I recommend this approach for 2 reasons:

1. Performance - Your websites are faster when you don't have to display thousands of rows and hundreds of columns at once.
2. Flow - The end-user is presented with information they can scan/read and then seamlessly load more information using AJAX to continue their experience.

Jeff Atwood (aka CodingHorror.com) has a fantastic blog post titled "The End of Pagination". Here are some key quotes from the post:

In a perfect world, every search would result in a page with a single item: exactly the thing you were looking for.

Pagination is also friction.

I'm not necessarily proposing that all traditional pagination be replaced with endless pagination. But we, as software developers, should avoid mindlessly generating a list of thousands upon thousands of possible items and paginating it as a lazy one-size-fits-all solution. This puts all the burden on the user to make sense of the items. Remember, we invented computers to make the user's life easier, not more difficult.

The end-user does usually prefer to see all the data as this Google research confirms:

User testing has taught us that searchers much prefer the view-all, single-page version of content over a component page containing only a portion of the same information with arbitrary page breaks.

Interestingly, the cases when users didn’t prefer the view-all page were correlated with high latency (e.g., when the view-all page took a while to load, say, because it contained many images). This makes sense because we know users are less satisfied with slow results. So while a view-all page is commonly desired, as a webmaster it’s important to balance this preference with the page’s load time and overall user experience.

And endless-scrolling does come with its own drawbacks like scrollbar issues, deep linking, back button position, and other issues mentioned in Jeff's excellent article:

The End of Pagination

Experiment, iterate, experiment…

Iterating and testing various usability scenarios is key to good UI. I recommend that you try the endless-pagination using the DevExpress ASPxCallBack, ASPxLoadingPanel, etc. In fact, this feature is built into the ASPxGridView: Demo ASPxGridView Virtual scrolling/paging

Above all else, you should strive to make pagination irrelevant because the user never has to look at more than a few items to find what they need. -Jeff Atwood

Perhaps the best approach for you might be to simply provide your end-users with one search box that loads the results of a search keyword (yes, like Google.com or Bing.com). Take a look at the ASPxGridLookup's Incremental filtering in Server Mode feature.

Sample code flow

The code central sample has the following flow of actions:

1. After rendering, the user scrolls down the page and we handle the 'scroll' event of the browser window.
2. When scrolling reaches the page's bottom, we generate a callback (using ASPxCallback) to obtain a new data portion from the server.
3. Then, we add the received items to the end of the dataContainerElement DIV element.

Take a look at the JavaScript code in the default.aspx to learn more.

Please leave me a comment below as I'd love to hear your thoughts on how you help your users with larges amounts of data presentation. Thanks!

Free DevExpress Products – Get Your Copy Today