JQGrid rendering performance

Question

We have performance issues with JQgrid rendering. Please advise.

JQGrid v4.3.2, jquery-1.7.2.min.js, jquery-ui-1.8.1.sortable.min.js, jquery-ui-1.8.20.custom.min.js Browser: IE6,7

Every user is shown data in 2 grids - actions and fyi's. Typical data range is ~300 rows in each grid. The list of columns could vary for user groups and hence the colModel structure is dynamic. After getting data we apply conditional styles to each row (to be bold or not etc) and change the number formatting.

Code sample for grid is as below:

jQuery('#ActionItems').jqGrid({
    url: 'http://actionsurl',
    mtype: 'GET',
    datatype: 'json',
    page: 1,
    colNames: actionsColNames,
    colModel: actionsColModel,
    viewrecords: true,
    loadonce: true,
    scrollrows: false,
    prmNames: { id: "PrimaryID" },
    hoverrows: false,
    jsonReader: { id: "PrimaryID" },
    sortname: 'CreateDt',
    sortorder: 'desc',
    gridComplete: function () {
        fnActionsGridComplete();
    },
    recordtext: "Displaying {1} of {2} Records",
    emptyrecords: "No data to view",
    emptyDataText: "No data found.",
    loadtext: "Loading...",
    autoWidth: true,
    rowNum: 1000,
    grouping: true,
    groupingView: groupingViewOp
});

Formatting code in fnActionsGridComplete():

1. Set column widths in %

2. Iterate thru rows to apply conditional css styles

   $("#Actions").find("tbody tr").each(function () {
       if ($(this)[0].id != '') { 
           var data = $(this).find('.IsItemNew').html();
               if(data == "Y") {            
               $(this).css("fontWeight", "bold");
               }                
       }                    
   });
   

3. Formatting for specific columns.

Currently we have performance issues for >200 rows of data in any grid. After analysis we found that formatting and rendering is taking most time.

Can you suggest any optimal way to improve performance here. (paging is no-no)

Regards, Rajani

- We did testing on IE9 and its lot better. But users cant immediately upgrade.

Answer 1

The reason is the code fnActionsGridComplete. I recommend you to read the answer which explains why it's very important to use gridview: true and reduce the number of changes of DOM elements of the page.

What you try to do seems could be implemented by adding cellattr to the column "IsItemNew". The code could be about the following

cellattr: function (rowId, value) {
    // additional parameter of cellattr: rawObject, cm, rdata are optional
    if (value === "Y") {
        return ' style="font-weight:bold;"';
    }
}

Alternatively you can add class attribute instead of style and define font-weight: bold in the class.

I recommend you to read the answer, this one, this one etc. If you would need to set some properties on the whole row instead of the cell only you can use rowattr (see the answer).

If you would include gridview: true and use cellattr, rowattr or custom formatters you would see that the performance of the grid will be on absolutely another level.