Request only needed blocks

For hundreds of thousands of orders, fetch only scrolled ranges from the server instead of downloading every row at once.

Integration steps

1. Prepare a query API

   Provide an API accepting start and end rows and returning that order range. This page's table uses local samples and does not request additional server rows.

2. Connect requests

   In datasource.getRows, pass params.startRow and params.endRow to the server. Include sorting and search conditions when applicable.

3. Report success or failure

   Call params.success with response rows and the total count. On failure, call params.fail so loading ends.

Call either success or failure only once per getRows request. /api/orders below is an example connection endpoint.

Useful terms

datasource

An object connecting Grid data requests to a server API.

Block

A group of rows fetched in one request.

Key API examples

Application code that references the registered Grid element as grid.

grid.datasource = {getRows: async params => {
  try {
    const response = await fetch('/api/orders', {method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({startRow:params.startRow,endRow:params.endRow,sortModel:params.sortModel,filterModel:params.filterModel,quickFilter:params.quickFilter})});
    if (!response.ok) throw new Error('Query failed');
    const {rows,total} = await response.json();
    params.success(rows,total);
  } catch { params.fail(); }
}};