Infinite scroll is a useful technique that allows to load new content automatically, when the user scrolls down and reaches the end of the page. This is the kind of feature that our customers asked us about for a fairly long time. Turns out, it is not that difficult to implement with the help of some custom coding.

1. Enable ‘AJAX search, pagination, sorting’ option on Pages -> List page settings dialogue.
2. Add the following code to List page: Javascript OnLoad event of the page where you need to implement infinite scrolling.

window.pagecount = 1;// adding load indicator under the grid$("[data-location='grid']").after("<span class='end\_message' style='visibility:hidden;font-weight:bold;margin-bottom:20px;display: block;text-align: center;'>End</span>");$("[data-location='grid']").after("<div class='load\_img' style='visibility:hidden;text-align:center;margin-bottom:10px;'><span style='font-weight:bold;margin-bottom:5px;clear:both;display:block;'>Loading</span><img src='images/indicator.gif' style='width:30px;height:30px;'></div>");// scroll event handler$(window).on("scroll", function() {// end of the document and we have more dataif ($(this).scrollTop() + 5 > $(document).height() - $(this).height()) {window.pagecount++;// show load indicator$(".load\_img").css("visibility", "visible");// get the next page contentRunner.runnerAJAX(Runner.pages.getUrl(pageObj.tName, pageObj.pageType) + "?goto=" + window.pagecount,pageObj.ajaxBaseParams,function(respObj) {// hide load indicator$(".load\_img").css("visibility", "hidden");// in respObj.html contains the whole new page HTML. We need to extract just the datavar grid\_tbody = $(respObj.html).find("[data-location='grid']").find("tbody");if (grid\_tbody.find("tr").length > 0) {// add new records to the grid$("[data-location='grid']").find("tbody").append(grid\_tbody.html());} else {// no new data, show 'End' message$(window).off("scroll");$(".end\_message").css("visibility", "visible");$(".load\_img").remove();}});}}); This is it. Enjoy!