How to improve performance of jqGrid

Question

I have more than 1000 rows to populate data through jqGrid. When I populate data through jqGrid, jqGrid takes more than 20 seconds to populate data. This time is taken only by jqGird (query execution time and other time is excluded). I have a requirement to populate 1000 rows by using jqGrid and I don't want to use Pagination. Please help me how to increase the performance of jgGrid.

The versions we are using are: jgGrid: 3.6.4 jQuery:1.4.2 jQuery UI:1.7.2 Browser: IE 7

Following is the code:

jQuery("#displayItemPerformanceGrid").jqGrid({
    //datatype: displayItemPerformanceGridData, //json
    url:'/DISMGMT/StandardProxy/displayItemPerformanceService?userRole='+userRole+
        '&userName='+userName+'&duration='+displayDuration+'&userId='+userId,
    datatype: 'json',
    colNames: ["CM","Display Location","Display Name","Item","Item Description",
               "Store","DC","Date","Type","Promo Retail","Reg. Retail 50" "Units",
               "Sales $", "Profit $"],
//      $("#load_navGrid").html("Loading...").show();
    colModel: [
        {name:"cmName",index:"cmName",classes:"metric",width:130,resizable:true,
         align:"left"},
        {name:"displayLocation",index:"displayLocation",width:80,align: "left"},
        {name:"displayName",index:"displayName",width:225,align:"left"},
        {name:"item",index:"item",sorttype:"int",width:60,align:"left"},
        {name:"itemDescription",index:"itemDescription",width:230,align:"left"},
        {name:"store",index:"store",sorttype:"int",width: 70,align: "right"//,
         //unformat : spaceFormatter
         },
        {name: "dc", index: "dc", sorttype: "int",width: 60,align: "right"//,
         //unformat : spaceFormatter
         },
        {name:"date",index:"date",sorttype:"date",datefmt:"mm-dd-yy",width:80,
         align: "left"},
        {name: "type",index: "type",width: 45,align: "left"},
        {name: "price",index: "price",width: 70,align: "left"},
        {name: "regRetail",index: "regRetail",width: 70,align: "left"},
        {name:"units",index:"units",sorttype:"int",width:45,align:"right",
         unformat : spaceFormatter},
        {name:"sales",index:"sales",sorttype:"int",width:45,align:"right",
         unformat : spaceFormatter},
        {name:"profit1",index:"profit1",sorttype:"int",width:40,align:"right",
         unformat : spaceFormatter}
    ],
    width: 982,
    height: 137,
    toolbar: [true, "top"],
    viewrecords: true,
    rowNum: 1500,
//      gridview:true,
    loadonce:true
});

Please suggest me how to improve performance of jqGrid

Answer 1

Use virtual scrolling (look at the demo, New in version 3.7 -> Virtual scrolling).

Answer 2

You question look like another question from trirand forum which I recently answered. To be sure I can repeate the information here.

In general for jqGrid is not a problem to display 1000 rows. The demo example which has 15 columns and 1000 rows will be displayed on my computer quickly enough. I have no IE7, but in IE8, IE9 beta, Chrome, Firefox, Opera and Safari (all in the last versions) the time to display the table is very quickly. In the example I use the modified jQuery UI, where .ui-widget :active { outline: none; } is removed. See here and here for more detailes.

So to be able to help you one need have possible full definition of your jqGrid inclusive the HTML code and test JSON data. You can capture the data with respect of Fiddler or Firebug. Probably you has some datatypes, don't use gridview:true option and use afterInsertRow method which make jqGrid working slower espetially for lagre pages. It can be also that you do many work inside of gridComplete or loadComplete event handler. So without having the code I can only guess. It can be also important which column you use for the sorting of the data and how you inserts the data in the grid (with data parameter, loadonce:true or using addRowData).

Another point of view is the usage of local paging. If you prefer to return all 1000 rows at once from the server it disturbs you not to use local paging of the 1000 rows of data. On the next example I demonstrate this. The problem is easy: all 1000 rows can not be displayed for the user at once. The user have to scroll the rows either in web browser or with respect fo jqGrid local paging. The advantage of the local paging is: only the data for one page will be placed in the table. All other data will be only hold in the sorted form internally. It can improve the performance and don't change almost anything from the users point of view.

More then that, having intelligent local filtering of data with respect of toolbar filtering or single field/advanced searching can help the user very much to analyse a lot of information from the 1000 rows which will be displayed him. Local filtering and local paging can be used very native together.