Dynamic loading on scroll...anyone done it?

[Josh Anderson]

This is half feature request and half a question for other telerik users out there -- has anyone successfully implemented a scroll-based loading process for radGrid?  I'm not sure what the exact terminology is, but it's how Google Reader loads articles.  When you get to a certain scoll point, it will load additional posts in the background.  I've seen implementations of this before, but nothing with a grid control.

It would be a great way to use radGrid since paging can sometimes be a pain.  What would be great is if it were embedded in the control -- set a point at which an AJAX event would fire requesting additional data and passing info about where in the data set you are.  Sort of like custom paging, only the grid would append the added data to the bottom of the list rather than changing the page.  I sort of think this has to be a telerik-implemented thing to really be efficient, since rebinding the grid, even via AJAX, negates the partial-rendering efficiency of this model as a replacement for a paging model.

Josh

[Shinu]

Hi Josh,

Have you gone through the following online demo?
Virtual scrolling and paging

Regards
Shinu.

[Josh Anderson]

Yes, I've seen that but it's nowhere near as elegant as the other solutions I've seen.  Google Reader is a perfect example -- the loading of additional data truly happens in the background, with no "Loading..." panels, no disappearance of data, nothing to tell the user that more data is being loaded other than the fact that the scroll bar changes size.

For example, say you have a data set of 10,000 records.  What I envision is a datagrid that you could load with, say, 100 records.  As you scroll down, at about record number 50 an AJAX request is triggered truly in the background.  The results of that request are then appended to the end of the rows in the grid, making the grid now have 200 records.  As you continue to scroll to record 150, another request is triggered and the grid is grown to 300 records.  There are no pages listed at the bottom, because this isn't a paging model.  It's a dynamically loaded grid so that at the end of it, if you continued scrolling all the way to the end, you'd have all 10,000 records visible in the grid (an extreme example, but you get the point).

What I don't like about the demo is that if you scroll down, the data disappears and you get a "Loading..." image, then another page of data.  It's not smooth and really is just using a vertical scroll bar to scroll through pages, not records.

Josh

[Yavor]

Hello Josh,

Another example that you may find worthwhile reviewing is the following one. Other than the loading panel (which can easily be removed) there is no other disturbance telling the end user that more items are being loaded - only the vertical scrollbar changes size.

Kind regards,
Yavor
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[S]

I want to second this request.  I tried looking at the example that was provided, but when I scrolled to the end, it threw an error!

http://demos.telerik.com/aspnet-ajax/grid/examples/programming/webmailgrid/defaultcs.aspx

[Yavor]

Hello S,

I double-checked the example, and it behaved as expected.
Can you please let me know what browser you are using, as well as any other relevant data, such as the steps which you took in order to receive this exception.

Greetings,
Yavor
the Telerik team

Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Follow the status of features or bugs in PITS and vote for them to affect their priority.

[S]

I just checked and it is also working for me now.  Not sure what caused the error before.

[Danyal Rashid]

I checked all the examples and I don't think these examples are what the original post is talking about.

Have a look at this example
http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/grid/tests/test_grid.html




Is it possible to configure RadGrid in this way? At the least, it would be nice to not lose the scroll click as the user changes the page. Currently, as soon as the new page is loaded, we lose the scroll click, can not continue scrolling, and have to re-click on the scroll bar to continue.

Can it load the new page in the background so the user can continue to scroll?
 

[Veli]

Hello Danyal,

Consider the RadGrid Virtual Scrolling with Client-side DataBinding demo. RadGrid supports virtual scroll paging with client-side databinding, and, as only the data rows are updated and not the entire RadGrid container, you get to keep the scroll bar pressed.

The Dojo grid example also demonstrates client-side databinding. When the grid container is not refreshed and the HTML inside is not recreated, you can keep the scroll bar pressed. There is no way you can have AJAX-postbacks and still keep the scroll bar pressed, because the content is refreshed.

All the best,
Veli
the Telerik team

[Danyal Rashid]

This is exactly what I was looking for, thanks for pointing me to it.

The link you provided Grid / Virtual scrolling with client binding works great in Firefox. But I cannot get to keep the scroll bar pressed in IE7. I am only interested in Virtual scrolling and paging with client-side data binding example (not the yahoo style)
 
Thank you for your support.

[Veli]

Hello Danyal,

Confirmed, scroll bar is not kept pressed in IE7 and Opera, due to the change in the DOM subtree inside the scrollable data container. RadGrid currently updates the table rows and adjusts the scroll position after paging.

Sincerely yours,
Veli
the Telerik team