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

$('#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,
});