Next
Prev

KoolGrid supports Lazy Data Loading. This sample Grid demonstrates how to Lazy Load data in the Grid. Click on the scrollbar to load more data.

var gridApp, gridRoot, dataGrid;
var lastVpos = 0;
var layoutURL = "./LayoutXml/LayoutSimple.xml";
var dataUrl = "http://www.koolchart.com/koolgrid/server/gridPagingData.php?page=";
					
function gridReadyHandler(id) {
  gridApp = document.getElementById(id);
  gridRoot = gridApp.getRoot();

  gridApp.setLayoutURLEx(layoutURL);
  gridApp.setDataURLEx(dataUrl+gridCurrentPage);

  var scrollHandler = function(event) {
    var vpos = event.position;
    if (vpos == 0)
      return;
    if (vpos >= dataGrid.getMaxVerticalScrollPosition()) {
      if (vpos != lastVpos) {
        lastVpos = vpos;
        gridAddPage();
      }
    }
  }
		
  var layoutCompleteHandler = function(event) {
    dataGrid = gridRoot.getDataGrid();
    dataGrid.addEventListener("scroll", scrollHandler);
  }

  gridRoot.addEventListener("layoutComplete", layoutCompleteHandler);
}

// The total number of data records.
var gridTotalRowCount = 300;
// The number of rows to be displayed in a page.
var gridRowsPerPage = 20;
// Calculating the total number of pages
var gridTotalPage = Math.ceil(gridTotalRowCount / gridRowsPerPage);
// Current page number	
var gridCurrentPage = 1;

function gridAddPage() {
  if (gridCurrentPage >= gridTotalPage)
    return;

  gridCurrentPage++;
		
  gridApp.addDataURLEx(dataUrl+gridCurrentPage);
}

© 2017 KoolChart. All rights reserved.