How to change Row color in JQGrid based on value in Column

Question

I am using JQGrid in my app.

Here I want to change the color if JqGrid row based on value in side the column.

I am able to change the color of column but I can not change the background color of row.

Here is the code that I am using to change the color of a row...

loadComplete: function (data) {
    //RETRIEVE COLUMN INDEX : ISPRINTED
    var isPrintColIndex = getGridColumnIndex(jQuery("#list10_d"), 'isPrinted');

    //CHANGE COLOR OF PRINTED ARTICLES
    //NOTE : JSON FORMATs ARE DIFFERENT SO ...HERE WE ARE ADDING CONDITION
    if (data != null && data.rows != null) {
        for (var index = 0; index < data.rows.length; index++) {

            if (typeof (data.rows[index].id) === 'undefined') {
                //LOAD BY JQGRID API ITSELF
                if (data.rows[index].isPrinted == 'NO') {
                    if (data.rows[index].isPrinted == 'NO') {
                        jQuery("#list10_d").jqGrid(
                            'setCell', data.rows[index]._id_, "articleid",
                            "", {
                            'background-color': 'red'
                        });
                    }
                }
            } else {
                ///FOR FIRST LOAD : LOAD BY JSON CALL
                if (data.rows[index].cell[isPrintColIndex] == 'NO') {
                    jQuery("#list10_d").jqGrid(
                        'setCell', data.rows[index].id, "articleid", "", { 'background-color': 'red' });
                }
            }
        }
    }
}

Can anyone suggest me changes in above code So I can change the background color of the row??

Answer 1

The color of the row (background color or the color of the text) can be defined by assigning additional style or class attribute on the selected <tr> elements (rows). jqGrid has rowattr which allows to do this during filling of the body of the grid. So the usage of rowattr will get you the best performance. You should use gridview: true to see the performance improvement.

The answer provide the solution of your problem.

Alternative way described here is slowly and should be used only on the old versions of jqGrid which don't have rowattr feature implemented. To understand why the way with rowattr works more quickly I recommend you to read the answer.

Answer 2

Inside the

loadComplete: function (){

    var rowIds = $(grid).jqGrid('getDataIDs');
    for (i = 1; i <= rowIds.length; i++) {//iterate over each row
        rowData = $(grid).jqGrid('getRowData', i);
        //set background style if ColumnValue == true
        if (rowData['ColumnValue'] == 'true') {
            $(grid).jqGrid('setRowData', i, false, "CSSRowSTyleToApply");
        } //if
    } //for
}//loadComplete

This should do what you are looking for. If you want to color the row based on a value inside the row, you can just fish out that value as you already have the row information that you are currently on.