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??

Temblor

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.

Puzzle

Woww Oleg .. Thanks for reply ... rowattr is working for me .. it reduced my too many LOL to a single Line to change to row color. I visited your demo too .. its wonderful work .. Thanks.. – Temblor

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.

Dovev

Thanks for the reply .. Rather than writing this much line of code .. The answer suggested by Oleg in this post is more efficient way .. Thanks. – Temblor

I agree, @Puzzle is the man! I will be using his method (which is new to me) in the future and going and changing my existing functions that use this. Oleg's answer is the better one. – Dovev

Answer 3

above solution is quite close, but needs some very important changes required, please use the following solution, hope you will enjoy!

loadComplete: function () {
  var rowIds = $('#YourGridId').jqGrid('getDataIDs');
       for (i = 0; i < rowIds.length; i++) {//iterate over each row
       rowData = $('#YourGridId').jqGrid('getRowData', rowIds[i]);
       //set background style if ColValue === true\
       if (rowData['ColName'] === "ColValue") {
         $('#YourGridId').jqGrid('setRowData', rowIds[i], false, "CSSClass");
       } //if
  } //for
}//loadComplete

Charming