Live Loading

DataViewsJS supports live loading. This feature loads the grid rows as they are scrolled into view. This feature is particularly useful for handling large amount of data and reducing memory consumption.

Steps to implement the live loading feature are as follows:

Sample Code

1. Add a column definition to create a grid structure.
2. Initialize the code by calling the grid ID from the DIV tag. Set the loadOnDemand property to true.

var totalItemCount;
var currentData;
$(document).ready(function () {
  var dataSource = {
    loadRange: function (params) {
      $.ajax({
        url: getUrl(index, count),
        crossDomain: true,
        success: function (result) {
          params.start = index;
          params.size = count;
          currentData = result.m_Item2;
          totalItemCount = result.m_Item1;
          params.success(currentData);
          if (index >= totalItemCount) {
            dataView.options.loadOnDemand = false;
          }
          index += count;
        },
        error: function (xhr, status) {
          params.failed();
          if (status !== 'abort') {
            alert('Failed to load data from remote web site.');
          }
        },
      });
    },
  };
  dataView = new GC.DataViews.DataView(
    document.getElementById('grid1'),
    dataSource,
    columns,
    new GC.DataViews.GridLayout({
      colWidth: 80,
      rowHeight: 36,
      loadOnDemand: true,
      selectionMode: 'none',
    })
  );
});