Generic UI - jQuery plugin is very simple to use. All you need to do is create html element with an id. Than call guiGrid function on it and specify required configuration: columns and source. Below is basic presentation of grid with just three columns and three items.

The usage of Generic UI is straightforward and will be explained in three steps:

  • Create HTML element and jQuery function
  • Specify columns configuration
  • Specify source configuration


Create a div element and mark it with an id of you choice. In this guid we will name the id as "jquery-basic-grid". It will be used as a target of jQuery function guiGrid.

<div id="jquery-basic-grid"></div>

Add to your code a new guiGrid JQuery function with div id "#jquery-basic-grid" as a target. Just like on example below.

$('#jquery-basic-grid').guiGrid({})


Now write a columns configuration option inside the guiGrid function, with it we will create column headers. In this example we are using two attributes:

  • header represents displayed header name
  • field marks column field for binding with data source

You can find more column options in a columns section

$('#jquery-basic-grid').guiGrid({
	columns: [
		{
			header: 'Name',
			field: 'name'
		},
		{
			header: 'Type',
			field: 'type'
		},
		{
			header: 'Price',
			field: 'price'
		}
	]
});



We got columns specified, now we need to bind it with source. Create new config option called source in guiGrid jQuery function and copy code below. Inside source are three items and each has three values: name, type, price. These values are names of our columns fields.

You can find more information on source in this section.

$('#jquery-basic-grid').guiGrid({
	columns: [
		{
			header: 'Name',
			field: 'name'
		},
		{
			header: 'Type',
			field: 'type'
		},
		{
			header: 'Price',
			field: 'price'
		}
	],
	source: [
		{
			name: 'T-shirt',
			type: 'clothes',
			price: '15$'
		},
		{
			name: 'Shoes',
			type: 'footwear',
			price: '100$'
		},
		{
			name: 'Ball cap',
			type: 'headgear',
			price: '50$'
		}
	]
});

This was the final step to setup grid with Generic UI using JQuery. Lookup more advance presentation in our demo section.