Jqgrid using cellattr to toggle a class on seperate cell

Question

in my col model i have two cells 'Status' and 'HiddenStatus'. The reason for this is 'Status' is translatable so this way is better rather than checking the value for each language. As you can see below i am attempting to set the class of the 'Status' cell based on the value of the 'HiddenStatus' cell. However this is not working as i hoped since the class is not being set correctly.

I believe the issue i am having is, 'getCell' is used to return the value rather than an object. How can i get the cell as an object so i can then manage what class i add or remove.

{name: 'Status', width: 70, index: 'Status'},
{name: 'HiddenStatus', width: 70, hidden: true, cellattr : function(rowId, cellValue, rawObject, cm, rdata){

 var statusCell = $(this).jqGrid('getCell',rowId,'Status');

 if(cellValue != "Assigned"){
    $(statusCell).removeClass('status-assigned');
    return '';
 }
 if(cellValue == "Assigned"){
    $(statusCell).addClass('status-assigned');
    return '';
 }                           
}},

score 2 · Accepted Answer · edited May 23 '17 at 11:59

First of all, it's important to understand what cellattr do. Any changes on the existing page are expensive. Thus jqGrid try to build the whole HTML fragment with the table body as one long string. Every column will be used to build the cells (<td> elements) of the corresponding columns of the grid. The callback cellattr will be called during building the cell and can be used to set attributes on the cell. The cellattr callback have to return the string. If it returns, for example, " class='status-assigned'" then the <td> will have the class (<td class='status-assigned'>...</td>).

The callback cellattr will be called before the grid will be created. Thus one can't access to the grid using $(this).jqGrid('getCell',rowId,'Status'), for example.

If you need to set class status-assigned conditionally on the cells of the column Status then you should define cellattr callback in the column Status. Inside the callback you can use rawObject.HiddenStatus or rdata.HiddenStatus. One don't need typically to create hidden columns like HiddenStatus. Instead of that, it's enough to use include all properties of input data, which one need, in additionalProperties option of jqGrid. For example, additionalProperties: ["HiddenStatus"].

Your original code could be modified to the following:

{
    name: 'Status', width: 70,
    cellattr: function (rowId, cellValue, item) {
        if (item.HiddenStatus === "Assigned") {
            return " class='status-assigned'";
        }
    }
}

See the old answer for an example of usage cellattr.

@Tony_89: I see that you are member on stackoverflow since 18 months, but you used votes cast only 41 times. **You have right to vote 30 questions or answers per day**. It's very important to vote **any information, which you find on the stackoverflow and which you find helpful**. Voting will be used by searching engine (Google too) for sorting. Thus you should vote helpful answers/questions if you want help other people from the community. You asked 36 questions and get multiple answers on some questions. Were at least some from the answers helpful? — Oleg, May 23 '16 at 13:06
I see what you mean, i had never really thought about it. And yes some answers are more useful than others, so i will definitely remember to vote in future. Thank you for pointing this out. — Tony_89, May 23 '16 at 14:47
@Tony_89: You are welcome! You are not the only person who didn't use voting. I wrote you just to be sure that you understand the value of voting. Best wishes! — Oleg, May 23 '16 at 14:57

Jqgrid using cellattr to toggle a class on seperate cell

1 Answers1