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

03 April 2012

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

DevExpressASPEndlessPagination

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:

DevExpress Pagination

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!

 

DXperience? What's That?

DXperience is the .NET developer's secret weapon. Get full access to a complete suite of professional components that let you instantly drop in new features, designer styles and fast performance for your applications. Try a fully-functional version of DXperience for free now: http://www.devexpress.com/Downloads/NET/

17 comment(s)
Phillip Roux

Mehul,

What we really need is endless scrolling with ASPxGrid...

3 April, 2012
Mehul Harry (DevExpress)

Phillip,

Have you seen the Virtual scrolling feature of the ASPxGridView? It provides you essentially this same approach: demos.devexpress.com/.../VirtualPaging.aspx

You can also style the ASPxGridView rows for more height if you need.

But the great thing is that feature is built-in to the ASPxGridView. ;-)

3 April, 2012
Alexander Krakhotko (Xafari team)

Hello!

What tool do you use for create GIF animation?

4 April, 2012
Mehul Harry (DevExpress)

Alexander,

Camtasia studio.

4 April, 2012
Andre Labaki

Mehul,

The problem with the ASPxGridView VirtualPaging is that it does not "append" the new page when scrolling, instead it "replaces" the old page with a new one. This behavior is counter-intuitive because if we scroll back up, the control asks the server for the previous page which was already loaded before we scrolled down in the first place.

What the Grid needs is an actual endless scrolling like the one demo'd in the sample you are referring to.

4 April, 2012
Mehul Harry (DevExpress)

Andre,

Take a look at the sample in this demo. The ASPxGridView is a grid after all so if you'd like to use it for an entire page, then I recommend using the approach in the sample above.

Thanks.

4 April, 2012
Crono

Mehul,

Your suggestion to Andre is to pay a steep price of lost features in exchange for one, and this is exactly what he, Phillip and I don't want to happen. As cool as endless pagination is, we can't afford to lose filter, sort, inline edition and validation of data for it.

Hope I made it clearer.

4 April, 2012
Mehul Harry (DevExpress)

Crono,

Thanks.

Endless pagination adds items to the page. If the ASPxGridView did that then you would lose performance as the grid rows increased.

Also, the ASPxGridView would need to try to keep the header floating at the top.

Not saying it's impossible but challenging.

I will look into it some more and let you know.

Thanks.

4 April, 2012
Crono

Mehul,

"Endless pagination adds items to the page. If the ASPxGridView did that then you would lose performance as the grid rows increased."

Right, but since that applies to your above sample too, it's kind of a non-issue.

"Also, the ASPxGridView would need to try to keep the header floating at the top.

Not saying it's impossible but challenging."

Now that looks more like a point to me. Indeed, it could hurt some web apps relying a lot on how the grid is rendered on the client. Not good. :/

Now maybe the solution could be a less awkward virtual scroll, with the two or three last pages remaining loaded? That already would be a huge improvement!

... especially for that darned last page holding only two or three records when others had 25! For the less-than-average end user (don't we love those? :D), it's very confusing.

I wished I could use virtual scrolling as it is now, but I know it will be a matter of days before a user calls in, freaking out and screaming "your stupid app deletes records as I scroll!!!!!!". :)

4 April, 2012
Andre Labaki

Mehul,

Thank you for your reply.

I total agree with Crono regarding the possibility to "cache" on the client side a certain number of pages.

Actually there is a suggestion logged in the support center which details exactly what we are looking for:

www.devexpress.com/.../S137906.aspx

I sincerely hope this will be implemented since I also cannot use the current state of the Virtual scrolling.

Thanks.

5 April, 2012
Crono

Thanks for the link, Andre. I'm tracking the suggestion now.

5 April, 2012
Gilmer Donis

Mehul, thanks for the tip, at first sight endless scrolling with devexpress seems such a great property, but after using it for a while, I'm not agree with the funcionality that the  ASPxGridView provide.  I also total agree with the other guys, "cache" is needed.

What you suggest isn't really what a user will be happy to have, because it just moved forward or backward from page to page, loosing the control over the actual page, and doing exactly what a click does to the page counter.

I'll be waiting for a new review to this property.

5 April, 2012
Fırat Esmer

I found this usefull. Thanks!

6 April, 2012
Mehul Harry (DevExpress)

@Firat Thanks!

6 April, 2012
Mehul Harry (DevExpress)

Crono, Andre, Gilmer, Philip,

Thanks for your feedback. I'll discuss it with the team and we'll consider it for the future.

6 April, 2012
mahendra bisht

may we have the functionality virtual scrolling with client-side databinding using devexpress Gridview. Means there is no server side progress and databinding when we scroll up.

21 August, 2012
Mehul Harry (DevExpress)

Mahendra,

The ASP.NET controls are server controls and the functionality you're looking for is not possible with the ASP.NET server controls. Keep an eye on devexpress.com for upcoming news about future products. Thanks.

21 August, 2012

Please login or register to post comments.