# Request only needed blocks

When downloading every order at once is impractical, request only the ranges needed for scrolling. datasource supplies data based on starting and ending rows and search conditions.

Canonical: https://grid.syidax.com/docs/features/infinite-row-model/

<a id="understand"></a>

## How it works and when to use it

The Grid creates requests and your app interprets server responses. Report the final data position or total count accurately to prevent repeated empty requests or incorrect scroll lengths.

In the code, grid is the Grid element prepared in the installation chapter. Check each example's data and settings, and implement the app functions and server endpoints for your project.

- [Installation and integration · Shared sample data](https://grid.syidax.com/docs/guides/getting-started.md)

<a id="example-1"></a>

## Example 1. Connect a range-query API

This example assumes the server returns rows from startRow inclusive to endRow exclusive and a total count. Always report response failures to the Grid.

```javascript
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(); }
}};
```

Verify the result: Rows populate the range the user navigates to. Implement the example query endpoint in your app.

<a id="example-2"></a>

## Example 2. Tune request size and caching

If server round trips are slow, adjust block size to avoid frequent requests for small blocks.

```javascript
grid.cacheBlockSize = 100;
grid.maxBlocksInCache = 5;
```

Verify the result: Limit rows per request and the number of retained blocks. Smaller caches reduce memory but may increase queries when revisiting earlier ranges.

<a id="example-3"></a>

## Example 3. Refresh after server data changes

Loaded cache data may be stale after an order is edited elsewhere.

```javascript
await grid.refreshInfiniteCache();
```

Verify the result: Read the latest server values after the refresh request completes. A local cell transaction and a server requery are separate operations.

<a id="pitfalls"></a>

## Combining features and troubleshooting

Call a success or failure callback only once per request. Finish validating the response before calling success, so a later exception does not also trigger failure.

Apply server search to the full data set before slicing a range. Searching only 100 downloaded rows misses matching rows elsewhere on the server.

<a id="related-api"></a>

## APIs used by this feature

- [datasource](https://grid.syidax.com/docs/options/datasource.md) — Data provider for the infinite row model. Complete each requested range through its success or failure callback.
- [cacheBlockSize](https://grid.syidax.com/docs/options/cacheBlockSize.md) — Block size for requesting and caching remote rows.
- [maxBlocksInCache](https://grid.syidax.com/docs/options/maxBlocksInCache.md) — Maximum cached blocks in the infinite row model. Balances memory use against repeat queries.
- [refreshInfiniteCache](https://grid.syidax.com/docs/methods/refreshInfiniteCache.md) — Refetches the infinite row model's cache. Prepare updated server conditions and the data provider first.

<a id="next"></a>

## Related reading

- [How rows, columns, and IDs relate](https://grid.syidax.com/docs/guides/concepts.md)
- [Connect results and events](https://grid.syidax.com/docs/guides/data-event-access.md)
- [Explore in Features](https://grid.syidax.com/grid/infinite-row-model) — The guide describes which interactions are available to try.