syidaxgrid
Home Pricing Settings

GRID FEATURE · PRO

Stream the visible range

This suits price feeds and monitoring views where the total count is known but only visible rows need continuous updates. Adjusting the subscription to the scroll range is essential.

Markdown source Features

How it works and when to use it

Retain setRowCount and setRowData from init and respond to setViewportRange requests. Check both request order and whether the view has been destroyed before applying remote responses.

Using this feature in a product requires the Pro package and a valid license. Matching setting names do not enable Pro features in Community.

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.

Example 1. Supply a static remote range

This example uses an app API that accepts start/end ranges and returns { rows }.

javascript
let callbacks;
let revision = 0;
grid.viewportDatasource = {
  init(api) { callbacks = api; api.setRowCount(100000); },
  async setViewportRange(first, last) {
    const current = ++revision;
    const response = await fetch('/api/quotes?first=' + first + '&last=' + last);
    if (!response.ok) return;
    const { rows } = await response.json();
    if (current === revision) callbacks.setRowData(first, rows);
  },
  destroy() { revision++; }
};

Verify the result: Only the most recently requested range is populated. Connect failure states to your app's error UI.

Example 2. Subscribe only to visible prices

When setViewportRange changes, unsubscribe from the old socket range and subscribe to product IDs in the new range. Supply updated data at the corresponding row positions when server messages arrive.

Verify the result: Keep the visible range current without continuously sending the entire market data set to the browser.

Example 3. Clean up and update the total count

When the data set changes, update both the total row count and range data. On view closure, clean up sockets, timers, and pending requests in destroy.

Verify the result: Messages from the previous view will not overwrite a new Grid. If the row count decreases, also verify that the current scroll position remains valid.

Combining features and troubleshooting

Viewport row positions are not business IDs. Sorting can place a different product at the same position, so also manage the server-defined order.

Tune update frequency and change highlighting in frequently changing views. There is no need to create DOM elements for every invisible row.

Related reading