Use condition in formatter - jqgrid

Question

I set icon of column in cells by formatter.
I want set icon by condition in cells.For example icon of column 'add' is 'ui-icon-icon1'
if value of column 'status' is "ok" then icon of column 'add' 'ui-icon-icon2' else
'ui-icon-icon1'
grid.jqGrid({
data: mydata,
datatype: 'local',
colNames: ['Inv No', 'Date', 'Client', 'Amount', 'Tax', 'Total', 'Notes', '', '', '', ''],
colModel: [
{ name: 'id', index: 'id', key: true, width: 70, sorttype: "int" },
{ name: 'invdate', index: 'invdate', width: 90, sorttype: "date" },
{ name: 'name', index: 'name', width: 100 },
{ name: 'amount', index: 'amount', width: 80, align: "right", sorttype: "float" },
{ name: 'tax', index: 'tax', width: 80, align: "right", sorttype: "float" },
{ name: 'total', index: 'total', width: 80, align: "right", sorttype: "float" },
{ name: 'note', index: 'note', width: 150, sortable: false },
{
name: 'add', width: 20, sortable: false, search: false,
formatter: function () {
return "<span class='ui-icon ui-icon-plus'></span>"
}
},
{
name: 'edit', width: 20, sortable: false, search: false,
formatter: function () {
return "<span class='ui-icon ui-icon-pencil'></span>"
}
},
{
name: 'del', width: 20, sortable: false, search: false,
formatter: function () {
return "<span class='ui-icon ui-icon-trash'></span>"
}
},
{
name: 'details', width: 20, sortable: false, search: false,
formatter: function () {
return "<span class='ui-icon ui-icon-document'></span>"
}
}
],
pager: '#pager',
rowNum: 10,
rowList: [5, 10, 20, 50],
sortname: 'id',
sortorder: 'desc',
viewrecords: true,
gridview: true,
height: '100%',
rownumbers: true,

Answer 1

Here is how I did something similar, and beware, you have to refer to the rowObect columns as index values, you cannot use name values as Rob Willis mention above as the rowObject will not contain that information (unless you are passing it down as extra information in your JSON, or localdata).
function FormatCell(cellval, opts, rowObject, action) {
var displayIcon = rowObject[IndexOfColumToCheck] == "CheckValue" ? true : false;
if (displayIcon)
return ....
//...format html to display the correct icon appended with the cell value
}//if (priceChange) {
else {
return ...
//...format html to display the correct icon appended with the cell value
}//else
As an example in the return you could return something like:
return '<img src="/images/icon_clock.jpg" class="CustomSearchResultIcons InGridIcon_Inactive" height="16px" width="16px" alt="Inactive User Icon" title="This user has not logged in recently" />' +
'<button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only InGridIcon InGridIcon_Friend" title="You are freinds with this user">' +
'<span class="ui-button-icon-primary ui-icon ui-icon-star"></span>' +
'</button>' + '<span class="InGridUsername">' + cellval + '</span>';

Answer 2

The formatter method takes three parameters: formatter(cellvalue, options, rowObject). You should be able to retrieve the value of the status column from the rowObject parameter e.g. rowObject[statusColumnIndex].
Note: The grid definition in the question does not contain a definition of the 'status' column mentioned in the text above so I'm not sure what the 'status' column index is.