Hi,
I'm looking into other posts and http://demos.telerik.com/aspnet-ajax/grid/examples/performance/virtualization/defaultvb.aspx?#qsf-demo-source page to understand howto achieve facebook like infinite scroll function.
Whis demo works fine but it has its own scrollbar. What I need is "scroll with browser scroll bar", not "scroll with grid's scrollbar".
In this demo (and in other similar posts) virual scrolling works inside grid's height. if you set grid's height to 500px then it works in that dimensions.
But facebook like scrolls or some other e-commerce sites like
http://demo.amasty.com/ajax-scroll/electronics/computers.html?d2si=84677
http://demo.usestrategery.com/infinite-scroll/electronics/all-products.html#/page/1
increases page's total height when you scroll down.
any suggestions ?
I'm looking into other posts and http://demos.telerik.com/aspnet-ajax/grid/examples/performance/virtualization/defaultvb.aspx?#qsf-demo-source page to understand howto achieve facebook like infinite scroll function.
Whis demo works fine but it has its own scrollbar. What I need is "scroll with browser scroll bar", not "scroll with grid's scrollbar".
In this demo (and in other similar posts) virual scrolling works inside grid's height. if you set grid's height to 500px then it works in that dimensions.
But facebook like scrolls or some other e-commerce sites like
http://demo.amasty.com/ajax-scroll/electronics/computers.html?d2si=84677
http://demo.usestrategery.com/infinite-scroll/electronics/all-products.html#/page/1
increases page's total height when you scroll down.
any suggestions ?
1 Answer, 1 is accepted
0
Hello Aykut,
RadGrid could not have control over the page's scroll and that it why its scroll is within the data table.
Since there is no way to achieve the desired behavior with any of the built-in functionalities of RadGrid (or any other control), the only thing that I could suggest is that you wrap your RadGrid in a RadAjaxPanel for example, enable paging, hide the pager items, handle the window's onscroll event and fire an AJAX request each time the user scrolls to the bottom of the page. Within the server-side OnAjaxRequest event handler you could increase the page size of the grid and rebind it.
For your convenience I am attaching a very basic implementation of such approach. However, please note that you should modify the client-side logic accordingly, so it could work in all browsers (I have tested it in Chrome and IE).
Kind Regards,
Konstantin Dikov
Telerik
RadGrid could not have control over the page's scroll and that it why its scroll is within the data table.
Since there is no way to achieve the desired behavior with any of the built-in functionalities of RadGrid (or any other control), the only thing that I could suggest is that you wrap your RadGrid in a RadAjaxPanel for example, enable paging, hide the pager items, handle the window's onscroll event and fire an AJAX request each time the user scrolls to the bottom of the page. Within the server-side OnAjaxRequest event handler you could increase the page size of the grid and rebind it.
For your convenience I am attaching a very basic implementation of such approach. However, please note that you should modify the client-side logic accordingly, so it could work in all browsers (I have tested it in Chrome and IE).
Kind Regards,
Konstantin Dikov
Telerik
Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.