Data source

Source is a configuration option defined inside guiGrid jQuery function. It allows the grid to link a column cell with a specific source data value. To create the column only one attribute is required and that is field. Field specifies what kind of data should be bound to the particular column. For example, if we give field a variable named as 'type' , we can use that variable in the source to bind specific value to it. Generic UI also have an option to indicate data loading. It can be done by adding loading option as one of the guiGrid configuration options.

See code example below:

source-grid.js
Example
$('#jquery-source-grid').guiGrid({
	columns: [
		{
			header: 'Name',
			field: 'name' 			//source {name: 'T-shirt'}
		},
		{
			header: 'Type',
			field: 'type' 			//source {type: 'clothes'}
		},
		{
			header: 'Price',
			field: 'price'			//source {price: '15$'}
		}],
	source: [
		{
			name: 'T-shirt',		//columns {header: 'Name', field: 'name'}
			type: 'clothes',		//columns {header: 'Type', field: 'type'}
			price: '15$' 			//columns {header: 'Price', field: 'price'}
		},
		{
			name: 'Shoes'			//Source items does not have to have all entities specified
		},
		{
			name: 'Ball cap',
			type: 'headgear',
			price: '50$'
		}]
});

Note:
The items inside source does not have to have all fields filled e.g. 'Shoes' can be sole source entity.

Generic UI is built in mind of handling big sets of data. We put considerable effort into the grid performance. To get more information about how to prepare grid for large data sets, see this section Virtual Scroll

Source - options

OptionsTypeDefaultDescription
sourceArray<{}>[] Data presented in rows.

Related articles:

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