Columns custom template

Generic UI for jQuery makes it possible to change built-in column styles.

To accomplish that, you can use custom template mechanism placed within columns configuration options. It allows you to add custom styles of your choosing to the column cells. Furthermore, to create the custom template, you have to include a view object in the columns options. The view object has to have a function as its property. This function takes only one argument, which is a cellValue. The cellValue reflects the data value of the particular column cell, e.g. column cell displaying vegetable name such as 'Avocado' will return cellValue as 'Avocado'. Moreover, the said template function has to return a string. It is important, since this string value will be used by the grid to render the cell with the chosen template.

function myTemplate(cellValue, item) {

	if (cellValue > 10) {
		return '<div class="color-red" >Great JOB! ' + cellValue + '</div>';
	} else {
		return '<div class="color-green">The Best template ' + cellValue + '</div>';
	}
}
	

As said above the custom template function must be placed inside columns configuration as a view object.

columns: [{
	header: 'Custom template',
	field: 'number',
	type: 'number',
	view: function myTemplate(cellValue) {
		if (cellValue > 10) {
			return '<div class="color-red" >Great JOB! ' + cellValue + '</div>';
		} else {
			return '<div class="color-green">The Best template ' + cellValue + '</div>';
		}
	}
}]

The custom template feature offers the possibility to change the grid columns in any way. Now you can display anything that you want inside your Generic UI grid. Take a look at the demonstration below, where custom templates are used to show fruits and vegetables with various custom templates.

Templates Example
templates.example.js
food.js
$('#jquery-columns-template-grid').guiGrid({
	columns: [{
		header: 'Name',
		field: 'name',
		type: 'string',
		view: 'text'
	}, {
		header: 'Calories',
		field: 'calories',
		type: 'number',
		view: function(value) {
			if (value > 85) {
				return '<div style="color: blue;font-weight: bold">' + value + '</div>';
			} else if (value > 30) {
				return '<div style="color: red;font-weight: bold">' + value + '</div>';
			} else {
				return '<div style="color: green">' + value + '</div>';
			}
		}
	}, {
		header: 'Fruit',
		field: 'isFruit',
		type: 'boolean',
		view: function(value) {
			if (value) {
				return '<div style="font-weight: bold">Yes</div>';
			} else {
				return '<div >No</div>';
			}
		}
	}],
	source: food
});
const food = [{
	name: 'Avocado',
	isFruit: true,
	calories: 160,
	wiki: 'https://en.wikipedia.org/wiki/Avocado',
	image: '//upload.wikimedia.org/wikipedia/commons/thumb/f/f2/Persea_americana_fruit_2.JPG/220px-Persea_americana_fruit_2.JPG'
}, {
	name: 'Bananas',
	isFruit: true,
	calories: 89,
	wiki: 'https://en.wikipedia.org/wiki/Banana',
	image: '//upload.wikimedia.org/wikipedia/commons/thumb/d/de/Bananavarieties.jpg/220px-Bananavarieties.jpg'
}, {
	name: 'Pears',
	isFruit: true,
	calories: 81,
	wiki: 'https://en.wikipedia.org/wiki/Pear',
	image: '//upload.wikimedia.org/wikipedia/commons/thumb/c/cf/Pears.jpg/220px-Pears.jpg'
}, {
	name: 'Celery',
	isFruit: false,
	calories: 16,
	wiki: 'https://en.wikipedia.org/wiki/Celery',
	image: '//upload.wikimedia.org/wikipedia/commons/thumb/5/5d/Illustration_Apium_graveolens0.jpg/220px-Illustration_Apium_graveolens0.jpg'
}, {
	name: 'Radish',
	isFruit: false,
	calories: 16,
	wiki: 'https://en.wikipedia.org/wiki/Radish',
	image: '//upload.wikimedia.org/wikipedia/commons/thumb/0/0c/Radish_3371103037_4ab07db0bf_o.jpg/220px-Radish_3371103037_4ab07db0bf_o.jpg'
}, {
	name: 'Strawberry',
	isFruit: true,
	calories: 32,
	wiki: 'https://en.wikipedia.org/wiki/Strawberry',
	image: '//upload.wikimedia.org/wikipedia/commons/thumb/7/7e/Strawberry_BNC.jpg/220px-Strawberry_BNC.jpg'
}];

Related articles: