Smart.Grid - Scrolling

Grid Scrolling

When loading a large data set in Smart.Grid and the Grid's height is not enough to show all data, a scrollbar is shown.

There are four different scroll modes in the Gid which can be set via the property scrolling. The default mode is 'physical', which enables scrolling behavior similar to that of standard HTML elements. The other three modes are:

• 'virtual'
• 'infinite'
• 'deferred'

Virtual scrolling

Virtual scrolling is enabled by setting scrolling to 'virtual'. In this case, data is loaded on demand while scrolling. This makes this scrolling mode suitable for large data sets that are dynamically retrieved from the server.

For virtual scrolling to work as expected, related properties of the Grid's data source also have to be set, e.g.:

dataSource: new Smart.DataAdapter({
            virtualDataSourceLength: 100000,
            virtualDataSourceCache: true,
            virtualDataSource: function(resultCallbackFunction, details) {
                setTimeout(function() {
                    resultCallbackFunction({
                        dataSource: GetData(details.first, details.last)
                    });
                }, 100);
            },

• virtualDataSourceLength - the number of records in the remote data source.
• virtualDataSourceCache - if set to true, data is cached and will not be reloaded if scrolled to again.
• virtualDataSource - a callback function which executes when a scroll position is reached and fetches only the portion of the remote data source that will be visible in the Grid.

Infinite scrolling

Infinite scrolling is enabled by setting scrolling to 'infinite'. In this case, data is loaded on demand the user has scrolled to the bottom of the Grid's view. This makes this scrolling mode suitable for large data sets that are dynamically retrieved from the server when the size of the data source is unknown.

For infinite scrolling to work as expected, the virtualDataSource property of the Grid's data source also has to be set.

Deferred scrolling

Deferred scrolling is enabled by setting scrolling to 'deferred'. In this mode, the Grid's view is updated when the scrollbar's thumb is released. The lack of reload while moving the thumb improves the performance significantly.