jQWidgets Forums
jQuery UI Widgets › Forums › Grid › Cell Rendering issue with Cell Formatting
Tagged: datagrid, grid control, jquery grid, jqxgrid
This topic contains 2 replies, has 2 voices, and was last updated by Peter Stoev 12 years ago.
-
Author
-
I have a cell that the value is float and the cellsalign: ‘right’, cellsformat: ‘c2’. I need to add a cellsrenderer to it that changes the color base on the value as shown in your example.
var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties) {
if (value < 20) {
return '‘ + value + ”;
}
else {
return ‘‘ + value + ‘‘;
}
}When I add the cellsrenderer, the cellsformat no longer takes place.
Here is your example modified. The format is not correct….
Grid with custom cells rendering.
$(document).ready(function () {
// prepare the data
var data = new Array();
var firstNames =
[
“Andrew”, “Nancy”, “Shelley”, “Regina”, “Yoshi”, “Antoni”, “Mayumi”, “Ian”, “Peter”, “Lars”, “Petra”, “Martin”, “Sven”, “Elio”, “Beate”, “Cheryl”, “Michael”, “Guylene”
];
var lastNames =
[
“Fuller”, “Davolio”, “Burke”, “Murphy”, “Nagase”, “Saavedra”, “Ohno”, “Devling”, “Wilson”, “Peterson”, “Winkler”, “Bein”, “Petersen”, “Rossi”, “Vileid”, “Saylor”, “Bjorn”, “Nodier”
];
var productNames =
[
“Black Tea”, “Green Tea”, “Caffe Espresso”, “Doubleshot Espresso”, “Caffe Latte”, “White Chocolate Mocha”, “Cramel Latte”, “Caffe Americano”, “Cappuccino”, “Espresso Truffle”, “Espresso con Panna”, “Peppermint Mocha Twist”
];
var priceValues =
[
“2.25”, “1.5”, “3.0”, “3.3”, “4.5”, “3.6”, “3.8”, “2.5”, “5.0”, “1.75”, “3.25”, “4.0”
];
for (var i = 0; i < 100; i++) {
var row = {};
var productindex = Math.floor(Math.random() * productNames.length);
var price = parseFloat(priceValues[productindex]);
var quantity = 1 + Math.round(Math.random() * 10);
row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
row["productname"] = productNames[productindex];
row["price"] = price;
row["quantity"] = quantity;
row["total"] = price * quantity;
data[i] = row;
}
var source =
{
localdata: data,
datatype: "array"
};
var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties) {
if (value < 20) {
return '‘ + value + ”;
}
else {
return ‘‘ + value + ‘‘;
}
}var cellsrendererTotal = function (row, columnfield, value, defaulthtml, columnproperties) {
if (value < 20.00) {
return '‘ + value + ”;
}
else {
return ‘‘ + value + ‘‘;
}
}$(“#jqxgrid”).jqxGrid(
{
width: 670,
source: source,
pageable: true,
autoheight: true,
columns: [
{ text: ‘First Name’, datafield: ‘firstname’, width: 100 },
{ text: ‘Last Name’, datafield: ‘lastname’, width: 100 },
{ text: ‘Product’, datafield: ‘productname’, width: 180 },
{ text: ‘Quantity’, datafield: ‘quantity’, width: 80, cellsalign: ‘right’, cellsformat: ‘f2’, cellsrenderer: cellsrenderer },
{ text: ‘Unit Price’, datafield: ‘price’, width: 90, cellsalign: ‘right’, cellsformat: ‘c2’, cellsrenderer: cellsrenderer },
{ text: ‘Total’, datafield: ‘total’, cellsalign: ‘right’, cellsformat: ‘c2’, cellsrenderer: cellsrendererTotal }
]
});
});Hi David,
1. Cells Rendering overrides the default rendering built in the Grid – This function expects HTML String as result and the Grid displays the HTML String in the cell instead of the default value. So as you may return any HTML String, the Grid will not try to format values returned by the Cells Renderer function. That is not an issue and is by design. If you want to format the values returned by the Cells Renderer, then you should implement that in the CellsRenderer callback associated to your column.
2. For Formatting your Code when posting in the Forum, please take a look at this topic: http://www.jqwidgets.com/community/topic/code-formatting/
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.