CODEWITHSUNDEEP
jqgridfree-jqgrid
Tony_89
Tony_89

Reputation: 817

jqGrid rowformatter based on separate cells value

I want to change the colour of a single cell based on the text contained in it. The cell will be a status, so either new, sent or assigned. The issue is that this text value is translatable so a formatter such as the code below will not work correctly.

function StatusColourFormatter(cellValue, options, rowObject){
    if(cellValue === 'NULL' || cellValue === 'undefined' || cellValue === 'null' || cellValue === null || cellValue === ' ' || cellValue == '&nbsp'){
        cellValue = '';
        return cellValue;
    }
    if(cellValue == "New"){
        rowsNew[rowsNew.length] = options.rowId;
        return cellValue;
        }

     if(cellValue == "Sent"){
        rowsSent[rowsSent.length] = options.rowId;
        return cellValue
        }
     if(cellValue =="Assigned"){
        rowsAssigned[rowsAssigned.length] = options.rowId;
        return cellValue
     }
}

So what i want to do is have a hidden column were the value is always in english but then i want to change the colour of the cell that holds the translated value. Is this possible, and how would i go about doing this?

Upvotes: 0

Views: 93

Answers (1)

Oleg
Oleg

Reputation: 222007

The color of the text of the cell or the background color can be changed by setting class or style attribute on the cell (on <td>). jqGrid have cellattr callback which helps here. It's important to understand that the goal of the custom formatter is building of the cell content and not the cell attributes. To change the cell attributes one should use cellattr.

Thus I recommend you to assign different class attribute based on the content of the cell

cellattr: function (rowId, cellValue) { //, rawObject, cm, item) {
    switch (cellValue) {
        case "New":
            return "class='new_color'";
            break;
        case "Sent":
            return "class='sent_color'";
            break;
        case "Assigned":
            return "class='assigned_color'";
            break;
    }
}

To set the value based on the content of another item (not the current cellValue) one should add rawObject, cm, item parameters to cellValue and to use item or rawObject object. In the most cases the choose of the item parameter with the column name as the property would be the best choice for free jqGrid.

Additionally one should define the CSS rules, which uses the classes and set the color or background-color for example as the following

.new_color {
    background-color: green;
}
.sent_color {
    background-color: yellow;
}
.assigned_color {
    background-color: red;
}
.new_color, .sent_color, .assigned_color {
    background-image: none;
}

Upvotes: 1

Related Questions