Question

So I have a jqgrid, and I use custom formatters to format the collumns, anyway when I click on a collumn head to sort, it sorts the collumns as expected but it removes the formatting I did, and instead puts “[object Object]” into the collumns where the formatter should have done its work.

The particular formatter is:

function(cellVal, options, rowObject){
    var optsURI = '../webrelease/common/images/page_v2_u'+(rowObject.opt2Up==2?1:0)+'_s'+(rowObject.optDuplex?1:0)+'_c'+(rowObject.optColor?1:0)+'_52.png';
    return $('<img class="finishing_icon" height="40" src="'+optsURI+'" />').attr('jobid', rowObject.jobid).click(finishingOptsCycle);
}

This seems to work well for removing and adding rows, but as soon as I hit resort the collumn changes from an image to a string [object Object]

Any ideas on how I can resolve this?

for completeness here is my entire jqgrid (excl rows & formatter):

grid.jqGrid({
    datatype: "local",
    editurl: "clientArray",
    width: 680,
    height: 290,
    colNames: [...],
    colModel: [...],
    hidegrid: false,
    shrinkToFit:false,
    multiselect: true,
    scroll:1,
    loadui: "block",
    loadtext: "Loading job list...",
    caption: 'Job List <img class="refreshbutton" width="20" height="20" src="../webrelease/desktop/images/icon_circle_arrow_right.png" />',
    pager: '#jqgrid_pager',
    onSelectRow: rowSelect,
    onSelectAll: allRowsSelect
});

Answer 1

The reason of the problem is the wrong usage of custom formatter. The function which implements custom formatter must return string.

I don’t recommend you to assign id attribute to elements of grid if it is not really required. I don’t understand why you could need to have <img> with ids.

If you need implement some custom action on click on the cell with <img> you can better use onCellSelect callback.

If you net yet implemented unformat for the same column where you use custom formatter I recommend you to do this.