How to change row color in JQGrid based on value in column

Question

I am using JQGrid in my application.

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

I can change the color of the column, but I can not change the background color of the row.

Here is the code that I use to change the color of a string ...

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 a change in the above code? So can I change the background color of the string?

Answer 1

The line color (background color or text color) can be determined by assigning an additional style or class attribute to the selected <tr> elements (lines). jqGrid has a rowattr , which allows you to do this while filling the body of the grid. So using rowattr will give you better performance. You should use gridview: true to see the performance improvement.

The answer provides a solution to your problem.

The alternative method described here is slow and should only be used in older versions of jqGrid that do not have a rowattr function. To understand why the rowattr is faster, I recommend that you read the answer .

Answer 2

Inside

 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 string based on the value inside the string, you can just throw that value away, since you already have the string information you're currently in.

Answer 3

The above solution is pretty close, but it requires very important changes, please use the following solution, I hope you enjoy it!

 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