Search code examples
jqgridcellformatter

jqGrid Custom Formatter Set Cell wont work with options.rowId


Ive been through all the posts, finally got setCell to work with hardcoded values, but not using the options.rowId.

 function StatusFormatter(cellvalue, options, rowObject) {
    if (cellvalue == 'C'){
        jQuery("#list").setCell(options.rowId , 'SOORDLINE', '', { color: 'red' });
        jQuery("#list").setCell("[2.000]", 'SOORDLINE', '', { color: 'red' });
        jQuery("#list").setCell('[2.000]', 'SOREQDATE', '', { color: 'red' });
        jQuery("#list").setCell(options.rowId, 'SOPRICE', '', { color: 'red' });
    }
    return cellvalue;
    };  

The FIRST and LAST lines dont work, but the 2 with the hardcoded rowId DO work. I inspected what comes back in the option.rowId and they are the same as the hardcoded values, (just different depending on the row of course. What am I missing? Please help. I dont see any difference between the lines, or values.

EDITED-

I tried the answer, and it seems to be what I need. I tried the following

      { name: 'SOORDLINE', index: 'SOORDLINE', width: 25, search: false ,celattr: function () { return ' style="color: red"'; }
},

To aleast make them all red before I dove into the logic, and it didnt do anything for me.


Solution

  • Sorry, but you use custom formatter in absolute wrong way. The goal of the custom formatter to to provide HTML fragment to fill the content of the cells in the corresponding column. So the StatusFormatter will be called before the row with the id equal to options.rowId will be created. Moreover for performance purpose one use typically gridview: true. in the case the whole content of the grid (the whole body of the grid) will be constructed first as string and only after that will be placed in the grid body in one operation. It improve the performance because after placing of any element web browser have to recalculate position of all other elements on the page.

    If you want to set text color on the SOORDLINE cell you should cellattr instead:

    celattr: function () { return ' style="color: red"'; }
    

    The celattr can be used also in the form celattr: function (rowId, cellValue, rawObject) {...} and you can test the property of rawObject which represent of the values for any column and return the cell style based on the cell value.

    Alternatively you can enumerate the rows inside of loadComplete and set the style on <tr> element instead of setting the same styles for every row. See the answer as an example.