Virtual Scroll Mode

Virtual scroll mode seamlessly enables server-side data loading for handling massive datasets by calculating row positions mathematically and loading only visible data from the server. Set scrollMode to ScrollMode.Virtual when working with datasets exceeding browser DOM height limits or implementing server-side pagination.

For basic DOM virtualization configuration (local datasets), row/column virtualization types, buffer settings, and row height configuration, refer to the Scrolling Configuration documentation which covers default DOM virtualization behavior.

Configuration

Virtual scroll mode calculates all row positions mathematically without rendering rows initially. Set scrollMode to ScrollMode.Virtual to enable server-side data loading for massive datasets.

Request size configuration

Request size configuration controls the batch size of requests (rows fetched per scroll request) using pageSettings.pageSize. By default, the grid retrieves 50 rows per request, balancing efficient data loading with responsive scrolling performance.

Configuration guidance:

• Faster networks: Increase to 100+ rows per request for better performance with low-latency connections.
• Slower networks: Decrease to 25-50 rows per request to reduce server load and timeouts.
• Multiple requests: When scroll viewport spans multiple page size based views, multiple requests are sent automatically for the viewed range.

Request batching with virtual scroll mode determines row fetch counts per request. The pageSettings.pageSize property controls the batch size (default: "50" rows per request).

Server-side data loading

Server-side virtualization powerfully handles extremely large datasets (millions of rows) by loading only visible data from the server. The grid detects scroll position, calculates required row range, sends a request, and renders received rows without re-fetching previously viewed data when caching is enabled.

Server-side virtualization manages only page size rows in memory at any time, scaling regardless of backend capacity and supporting live data streams and real-time updates. This approach is ideal for extremely large datasets exceeding browser DOM height limits.

Content caching

Caching prevents the grid from re-fetching previously viewed data, improving performance during scrolling and navigation. This behavior is controlled by the enableCache property, which is enabled by default. Set enableCache to false only when working with live data streams that change frequently, and for very large datasets, monitor memory usage during extended scrolling and clear the cache periodically to maintain smooth performance.

Caching recommendations:

• Enable caching (default) for most use cases to avoid redundant server requests.
• Disable caching only when server data changes constantly (live streams), memory is extremely limited, or data freshness is critical on every scroll.

Disabled cache forces the grid to re-request data from the server during every scroll operation, increasing server load and reducing performance.

Performance best practices

This section describes recommended patterns for achieving robust server-side virtualization performance with virtual scroll mode.

• Server request optimization: Page size adjustment balances pageSettings.pageSize (default "50") against network latency. Increase to 100+ for faster networks or larger datasets. Decrease to 25-50 for slower connections to reduce server load per request. Monitor network waterfall to identify bottlenecks.

• Content caching strategy: Caching configuration with enableCache: true (the default) prevents re-fetching previously viewed data. Disable caching (enableCache: false) only for constantly-changing live data streams. Monitor memory usage during extended scrolling sessions. Clear cache periodically for very large datasets to manage memory.

• Buffer tuning for server-side virtualization: Buffer size tuning adjusts preload capacity from 8-10 for faster networks with low latency (preload more rows ahead) to 2-3 for slow networks or server-side constraints. Balance buffer size against network round-trip time. Test with actual network conditions before production deployment.

Troubleshooting

This section provides solutions to common issues encountered with virtual scroll mode.

Scrolling back to previously viewed data is slow

• Symptoms: Navigating back to previously viewed rows takes significant time.

• Cause: Caching disabled or not functioning properly with virtual scroll mode.

• Solution: Ensure caching is enabled (default) in virtualizationSettings as shown in the example below. For server-side data, verify the server properly caches responses.

const [virtualizationSettings] = useState({
  scrollMode: ScrollMode.Virtual,
  enableCache: true
});
const [pageSettings] = useState({ pageSize: 50 });

<Grid
  dataSource={dataManager}
  virtualizationSettings={virtualizationSettings}
  pageSettings={pageSettings}
/>

Data does not update after changes when caching is enabled

• Symptoms: Grid shows cached data after data update occurs on the server.

• Cause: Cache contains stale data from previous requests.

• Solution: Disable caching (enableCache: false) for constantly-changing data. Alternatively, use pagination instead of virtualization to ensure fresh data on every page load.

const [virtualizationSettings] = useState({
  scrollMode: ScrollMode.Virtual,
  enableCache: false
});
const [pageSettings] = useState({ pageSize: 50 });

<Grid
  dataSource={dataManager}
  virtualizationSettings={virtualizationSettings}
  pageSettings={pageSettings}
/>