Question

I am trying to make a cell colored and clickable if it satisfies certain condition.
The problem that I am getting is in passing the parameter to the onclick of the element.
I am doing something like:

{
    name: 'numberOfUnits',
    index: 'numberOfUnits',
    sorttype: 'integer',
    cellattr: function (rowId, tv, rawObject, cm, rdata) {
        if (...) {
            return 'style="background-color:red" onClick="javascript:showReceivedLockedPieChartDialog(' + '\'' + lockedCellId + '\'' + ')"';
        }
        else {
            return 'style="color:black"';
        }
    }
}

I see that the text is being formed as:

style="background-color:red" onClick="javascript:showReceivedLockedPieChartDialog('ABC')"

I see that it is creating something like this…

<td aria-describedby="reportGrid_numberOfUnits" title="13" ABC")"="" onclick="javascript:showReceivedLockedPieChartDialog(" style="background-color:red" role="gridcell">13</td>

Please help me pass the parameter to this function.

Answer 1

Ohh yes! Your code shows that the parting of string returned from cellattr will be parsed not carefully enough. I find that one should better rewrite the function formatCol which will be used internally. I wanted to post next time to trirand suggestion to change the code using RegEx matching.

Nevertheless there are some simple rules which could allow to use cellattr in the current implementation:

• you should use style attribute as the last attribute in the string returned from cellattr
• you should include additional ' ' blank as the first character of returned value if you returns not only the value for the style attribute.
• you should not use words style, title and class only as the names of the corresponding attributes.

The last rule means that you should not use class="mytitle" or title="my class style". The parsing of the returned string is not so careful. So such names will have some side effects. As I wrote before the corresponding part of the code jqGrid which parse the results should be changed in my opinion. I will try to post the corresponding suggestions to trirand in the next time.

In your case you should rewrite the code of cellattr to

cellattr: function (rowId, tv, rawObject, cm, rdata) {
    if (...) {
        return ' onclick="showReceivedLockedPieChartDialog(' + '\'' +
            lockedCellId + '\'' + ')" style="background-color:red"';
    } else {
        return 'style="color:black"';
    }
}

The demo shows that the changes works.