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:

$('#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.