Column Headers and Grid Cells Center Text Alignment

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}
]
});
grid-center-text-alignment

About admin


This entry was posted in JavaScript, JavaScript Plugins, JavaScript UI, JavaScript UI Plugins, JavaScript UI Widgets, JavaScript Widgets, jQuery, jQuery Plugins, jQuery UI, jQuery UI Plugins, jQuery UI Widgets, jQuery Widgets, jQWidgets, jqxGrid and tagged , , , , , , , , , , . Bookmark the permalink.



Leave a Reply