Access html-element from grid in loadComplete

Question

So what I'm trying to accomplish is when the grid is fully loaded, I loop over a certain column that contains checkboxes. Depending on the value of the checkbox I should be able to disable it. Problem is that I can't access the html element that's there. Am i doing something wrong or overlooking something? What i've tried:

loadComplete: function() {
    // Fetch all the ID's of the rows   
    var rows = $("#table").getDataIDs();
    // Loop over the rows
    if(rows.length != 0){
        for(i=0; i < rows.length; i++) {
            // Get the data so we test on a certain condition
            var row = $("#table").jqGrid("getRowData", rows[i]);   
            if (row.gridCheckbox == 1) {
              //disable the element
              row.prop("disabled", "disabled");
            }
        }
    }
}

Answer 1

It's important to understand that changing one element on the page follow in the most cases to web browser reflow: validation whether some property (position for example) need be changed in all other elements on the page. If you do changes in the loop then your JavaScript code can be really slow.

Thus it's strictly recommended to reduce the number of changes of the DOM. Especially to reduce the number of changes jqGrid provides rowattr, cellattr and custom formatters. If you need for example to set disabled attribute on some rows then you should now do this in loadComplete, but to use rowattr instead to inform jqGrid that some additional attributes (disabled="disabled") should be set on some rows. jqGrid collect first the string representation of the whole table body and it use one assignment of innerHTML to fill the whole body of the grid in one DOM operation. It improves essentially the performance. See code example in the old answer.