Blogs

To change the text-alignment of the Grid cells and column headers, you can do the following: 1. Create two functions, called cellsrenderer and columnsrenderer. These functions will return a HTML string with a DIV tag with inline CSS Style that sets the ‘text-align’ property to center.

var cellsrenderer = function (row, column, value) {
	return '<div style="text-align: center; margin-top: 5px;">' + value + '</div>';
}
var columnsrenderer = function (value) {
	return '<div style="text-align: center; margin-top: 5px;">' + value + '</div>';
}

2. Set the ‘renderer’ and ‘cellsrenderer’ functions of each Grid Column to point to the functions. The ‘renderer’ function is called when a column is going to be renderer and the ‘cellsrenderer’ function is called when a grid cell needs to be rendered.

$("#jqxgrid").jqxGrid(
{
	source: dataAdapter,
	columns: [
	  { text: 'First Name', dataField: 'firstname', renderer: columnsrenderer, cellsrenderer: cellsrenderer, width: 100 },
	  { text: 'Last Name', dataField: 'lastname', renderer: columnsrenderer, cellsrenderer: cellsrenderer,  width: 100 },
	  { text: 'Product', dataField: 'productname', renderer: columnsrenderer, cellsrenderer: cellsrenderer, width: 180 },
	  { text: 'Quantity', dataField: 'quantity', renderer: columnsrenderer, cellsrenderer: cellsrenderer, width: 80, },
	  { text: 'Unit Price', dataField: 'price', renderer: columnsrenderer, cellsrenderer: cellsrenderer,  width: 90},
	  { text: 'Total', dataField: 'total', renderer: columnsrenderer, cellsrenderer: cellsrenderer,  width: 90}
	]
});