Virtual scroll

Virtual scroll makes it possible to display large data sets without performance issues. Its main feature is that, it only renders the items visible inside Generic UI grid boundaries. This mechanism is also often called infinite scroll or view port rendering.

Large data sets can affect any browser. They cause loading speed, to be significantly longer. The virtual scroll function fixes the issue by only allowing the browser to render the visible grid space, instead of the all data sets at once.

Virtual scroll will only work, if the grid has defined height. Both functions can be set by adding configuration options to the guiGrid settings, see description below.

The grid can handle huge data sets, even 1 million records should not cause any performance issues. You can see it in this example jQuery Grid Performance example

Virtual scroll example
virtual-scroll-grid.js
$('#jquery-virtual-scroll-grid').guiGrid({
	maxHeight: 400,
	virtualScroll: true,
	columns: [{
		header: 'Nr',
		field: 'index',
		width: 25,
		type: 'number'
	}, {
		header: 'Code',
		field: 'cca2',
		width: 45
	}, {
		header: 'Flag',
		field: 'flag',
		width: 45
	}, {
		header: 'Name',
		field: function(country) {
			return country.name.common;
		}
	}, {
		header: 'Capital',
		field: 'capital'
	}, {
		header: 'Region',
		width: 80,
		field: 'region'
	}, {
		header: 'Subregion',
		field: 'subregion'
	}, {
		header: 'Area',
		field: 'area'
	}],
	source: this.countriesResource.getCountries()
	infoPanel: true,
});

Virtual scroll - options

OptionsTypeDefaultDescription
virtualScrollbooleanfalse Activates virtual scrolling feature, when set to 'true'.
maxHeightnumber- Sets max height of the grid. This option is required for virtual scroll function.

Related articles:

We use cookies to improve your experience. If you continue browsing, we assume that you consent to our use of cookies.