
# LazyLoading

Lazy loading in a grid can be implemented by reading the next data when scrolling to the last row. RealGrid provides scroll-related callback functions to implement this behavior.

#### Get the next data when scrolled to the last row

Lazy Loading can be implemented using the GridBase.onScrollToBottom() callback function, which is called when the grid is scrolled to the last row.

```js
const fields = [
  { fieldName: "KorName", dataType: "text" },
  { fieldName: "Gender", dataType: "text" },
  { fieldName: "Age", dataType: "number" },
  { fieldName: "Phone", dataType: "text" },
  { fieldName: "ProductId", dataType: "text" },
  { fieldName: "KorCountry", dataType: "text" },
  { fieldName: "OrderDate", dataType: "datetime", datetimeFormat: "yyyy-MM-dd", amText: "AM", pmText: "PM" },
  { fieldName: "CardNumber", dataType: "text" },
  { fieldName: "Monetary", dataType: "text" },
  { fieldName: "StartDate", dataType: "datetime", datetimeFormat: "yyyy-MM-dd", amText: "AM", pmText: "PM" },
  { fieldName: "EndDate", dataType: "datetime", datetimeFormat: "yyyy-MM-dd", amText: "AM", pmText: "PM" },
  { fieldName: "ToMonth", dataType: "number" },
  { fieldName: "Month", dataType: "number" },
  { fieldName: "Year", dataType: "number" },
  { fieldName: "InterestRate", dataType: "number" },
  { fieldName: "SaveCost", dataType: "number" },
  { fieldName: "SaveMaturity", dataType: "number" },
  { fieldName: "CurrentSave", dataType: "number" }
];

const columns = [
  { name: "KorName", fieldName: "KorName", width: "60", header: { text: "Name" } },
  { name: "Gender", fieldName: "Gender", width: "40", header: { text: "Gender" } },
  { name: "Age", fieldName: "Age", width: "40", header: { text: "Age" }, styleName: "right-column" },
  { name: "Phone", fieldName: "Phone", width: "100", header: { text: "Phone" } },
  { name: "ProductId", fieldName: "ProductId", width: "120", header: { text: "Product ID" } },
  { name: "KorCountry", fieldName: "KorCountry", width: "100", header: { text: "Investment Country" } },
  { name: "OrderDate", fieldName: "OrderDate", width: "100", header: { text: "Order Date" } },
  { name: "CardNumber", fieldName: "CardNumber", width: "140", header: { text: "Card Number" } },
  { name: "Monetary", fieldName: "Monetary", width: "40", header: { text: "Currency" } },
  { name: "StartDate", fieldName: "StartDate", width: "100", header: { text: "First Payment Date" } },
  { name: "EndDate", fieldName: "EndDate", width: "100", header: { text: "End Date" } },
  { name: "ToMonth", fieldName: "ToMonth", width: "50", header: { text: "Payment Count" }, styleName: "right-column" },
  { name: "Month", fieldName: "Month", width: "50", header: { text: "Remaining Count" }, styleName: "right-column" },
  { name: "InterestRate", fieldName: "InterestRate", width: "50", numberFormat: "0.00", header: { text: "Interest Rate" }, styleName: "right-column" },
  { name: "SaveCost", fieldName: "SaveCost", width: "80", numberFormat: "#,##0", header: { text: "Payment Amount" }, styleName: "right-column" },
  { name: "SaveMaturity", fieldName: "SaveMaturity", width: "80", numberFormat: "#,##0", header: { text: "Maturity Amount" }, styleName: "right-column" },
  { name: "CurrentSave", fieldName: "CurrentSave", width: "80", numberFormat: "#,##0", header: { text: "Current Balance" }, styleName: "right-column" }
];

const { gridView, dataProvider } = RealGrid.createGrid("realgrid", {
  columns,
  header: { height: 40 },
  display: { rowHeight: 36, emptyMessage: "No data to display." },
  edit: { insertable: true, appendable: false },
  footer: { height: 40 },
  stateBar: { width: 16 },
  onInitialized: (grid) => {
    fetch('/data/en/simple_data200.json')
      .then(response => response.json())
      .then(data => {
        grid.getDataSource().setRows(data);
      });
  }
}, {
  fields
});

window.gridView = gridView;
window.dataProvider = dataProvider;

function setScrollToBottom() {
  gridView.onScrollToBottom = function() {
    fetch('/data/en/simple_data200.json')
      .then(response => response.json())
      .then(data => {
        dataProvider.fillJsonData(data, {
          fillMode: "append",
          noStates: true
        });
        gridView.refresh();
      });
  };
}

window.setScrollToBottom = setScrollToBottom;
```

```js
gridView.onScrollToBottom = function() {
   httpRequest = new XMLHttpRequest();
   httpRequest.onreadystatechange = function() {
     if (httpRequest.readyState === XMLHttpRequest.DONE) {
       if (httpRequest.status === 200) {
         var data = JSON.parse(httpRequest.responseText);
         dataProvider.fillJsonData(data, {
           fillMode: "append",
           noStates: true
         });
         gridView.refresh();
       }
     }
   };
   httpRequest.open("GET", "/data/" + simple_data.json);
   httpRequest.send();
};
```