Speed Up JQGrid Highlighting Row On GridComplete

Question

I am setting row color based on certain conditions. I have several grids that have several rows. This code is severley slowing down the loading of the page

    function setRowColorSetgrid() {
        var rows = $("#Setgrid").getDataIDs();
        for (var i = 0; i < rows.length; i++) {
            var status = $("#Setgrid").getCell(rows[i], "value");
            if (status == "False") {
                $("#Setgrid").jqGrid('setRowData', rows[i], false, {
                    color: 'white',
                    weightfont: 'bold',
                    background: 'red'
                });
            }
        }
    }

 //Have a function to set color for each grid I am loading
    function setRowColorSomeOthergrid() {
        var rows = $("#SomeOthergrid").getDataIDs();
        for (var i = 0; i < rows.length; i++) {
            var status = $("#SomeOthergrid").getCell(rows[i], "value");
            if (status == "False") {
                $("#Somethergrid").jqGrid('setRowData', rows[i], false, {
                    color: 'white',
                    weightfont: 'bold',
                    background: 'red'
                });
            }
        }
    }

In the grid Complete of a JQGrid I am calling this

    gridComplete: function(){setRowColorSetgrid();}
   //Have a grid creation funcrtion for all the grids I am loading
       gridComplete: function(){setRowColorSomeOthergrid();}

This is making the page really big and I think because I am searching each row of each grid for a status "False" its taking forever to load

How can I cut my javascript code down to not having a setRowColor... function for each grid

What other logic can I use to set the row color based on a field value that will perform much better?

Here is my jqgrid. The class never gets applied but the function indeed works to iterate through rows

  function INIFiltersgrid() {
            var data = [
                ['INI Exception', 'False', 'INI Path: Not Found'],
            ];
            $("#INIFiltersgrid").jqGrid({
                datatype: "local",
                height: 500,
                width: 900,
                colNames: ['Name', 'Passed', 'Value'],
                colModel: [{
                    name: 'name',
                    index: 'name',
                    width: 90
                }, {
                    name: 'value',
                    index: 'value',
                    width: 60
                }, {
                    name: 'passed',
                    index: 'passed',
                    width: 240,
                    height: 400
                }],
                gridview: true,
                rowattr: function (rd) {
    if (rd.value === "False") { // verify that the testing is correct in your case
        return {"class": "myAltRowClass"};
    }
                caption: "INIFilters"
            });
            var names = ["name", "value", "passed"];
            var mydata = [];
            for (var i = 0; i < data.length; i++) {
                mydata[i] = {};
                for (var j = 0; j < data[i].length; j++) {
                    mydata[i][names[j]] = data[i][j];
                }
            }
            for (var i = 0; i <= mydata.length; i++) {
                $("#INIFiltersgrid").jqGrid('addRowData', i + 1, mydata[i]);
            }
            $("#INIFiltersgrid").jqGrid('setGridParam', {
                ondblClickRow: function(rowid, iRow, iCol, e) {
                    alert('double clicked');
                }
            });
        }

Answer 1

You should use rowattr callback function, which allows to add class or to set some attributes (like style="...") on some rows. See the old answer for the corresponding code example. It's important to use gridview: true option additionally (see [the answer]). If you use free jqGrid, then gridview: true option is already default.

By the way I don't recommend you to use gridComplete. The callback loadComplete is better in the most cases. See the answer for more detailed explanation.

UPDATED: One should never ever use addRowData in the loop to fill the grid. It's the worst way, which I know for filling the grid (and the slowest too). If you need to fill the grid with mydata then you should just add data: mydata option to the grid. Moreover if you use free jqGrid fork of jqGrid, which I recommended in my answer, then rowattr will be still applied even if you use addRowData. If you use an old jqGrid then the row added by addRowData, will be added without applied rowattr.