Basic

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 HTML element and jQuery function

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({})

Specify columns configuration

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'
		}
	]
});

Specify source configuration

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.