Grid rows

This guide covers grid rows functions. They allow you to define how rows should be structured, including horizontal grid, vertical grid and row coloring. The rows styling can be set in three different ways: 'Even', 'Odd' or 'None'. It is simple and easy just add one of the functions in the grid configuration selector.

On the example below you can check following functions:

  • Horizontal grid,
  • Vertical grid,
  • Row coloring: None, Odd, Even.
Rows example
rows-example.js
$('#jquery-rows-grid').guiGrid({
columns: [{
	header: 'Number',
	field: 'number',
	type: 'number',
	width: 80
}, {
	header: 'Name',
	field: 'name',
	view: 'italic'
}, {
	header: 'Position',
	field: 'position',
	view: 'bold',
	width: 100
}, {
	header: 'Team',
	field: 'team'
}],
	theme: 'Generic',
	source: source,

	horizontalGrid: true,
	verticalGrid: true,
	rowColoring: 'none'
});

Row - options

OptionsTypeDefaultDescription
horizontalGridbooleantrue Enables horizontal lines that separate rows within the grid.
verticalGridbooleantrue Enables vertical lines that separate columns within the grid.
rowColoringstring'Even'Applies colored shading to the grid rows. Available shading options: 'None', 'Odd', 'Even'.