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