Conditional styling using existent CSS classes

[Gustavo Roa]

I already have in my Column Model something like this working
        {
            title: "Number of days",
            width: "15%",
            dataType: "string",
            editable:false,
            dataIndx: "DataColumn",
            render: function (ui) {
                // Conditional Styling depending on DataColumn value
                if (parseInt(ui.rowData.DataColumn.replace(/[^0-9]/g, '')) >= 5 && parseInt(ui.rowData.DataColumn.replace(/[^0-9]/g, '')) < 10) {
                    return { style: "background:yellow; color: navy;" };
                }
                if (parseInt(ui.rowData.DataColumn.replace(/[^0-9]/g, '')) >= 10) {
                    return { style: "background:red; color: white;" };
                }
            } // Conditional styling code ends
        }

Now, I need to move the styles passed to the CSS file, so I created the following classes:

.dashboard-red {
    background:red;
    color: white;
}

.dashboard-yellow {
    background:yellow;
    color: navy;
}

Now I need to assign it to the column, so I did this, but it is not working:

         {
             title: "Number of days",
             width: "15%",
             dataType: "string",
             editable: false,
             dataIndx: "DataColumn",
             render: function (ui) {
                 // Conditional Styling depending on DataColumn
                 if (parseInt(ui.rowData.DataColumn.replace(/[^0-9]/g, '')) >= 10 && parseInt(ui.rowData.DataColumn.replace(/[^0-9]/g, '')) < 20) {
                     return { class: "dashboard-yellow" };
                 }
                 if (parseInt(ui.rowData.DataColumn.replace(/[^0-9]/g, '')) >= 20) {
                     return { class: "dashboard-red" };
                 }

             } // Conditional styling code ends

It is not working, what I am doing wrong?

Thanks and best regards

[paramvir]

It's cls instead of class

Code: [Select]

return { cls: "dashboard-yellow" };