jqGrid : Performance issues ((while scrolling) in IE 9/11 when compared to FF

Question

Have setup a grid that actually gets the records from a java back-end.The data is sent in json format and hence I use the datatype as json in jqgrid. I have already used the suggestions in forums , i.e., have already tried including all the properties but still the performance is drastic when the records count that are retrieved from java are > 500 rows. And this is slow only in IE but in FF the rendering is pretty fast and work fine.

Please not that I don't want pagination but all the records should be shown with the vertical scroll bar available within the grid.

Have pasted the important properties/functions I have used, kindly suggest on this.

    type: "POST",
    cache: false,
    url: '............', 
    datatype: "json",
    viewrecords: false,
    gridview: true, // tried false as well
    pgtext: "",
    ignoreCase: true,
    rownumbers: true,
    pginput: false,
    loadonce: true, // tried setting the loadonce:false as well , no luck
    pager: false,
    cellEdit: true,
    pgbuttons: false,
    editurl: 'clientArray',
    beforeProcessing: function (data) {
//setting the rownum, if not set it always shows only 20 records as its the default
      $(this).setGridParam({rowNum: data.length}).trigger("reloadGrid");
    },
    loadComplete: function (data) {
        if (data.length > 0) {
            if (data.length <= 10) {
                $(this).setGridHeight('auto');
            }
            else {
                $(this).setGridHeight(200); //setting vertical scroll bar within the grid and not for browser
            }
        }
        else if (data.length == 0) {
            ..............
        }
    }

Answer 1

I'd recommend you to upgrade to the latest free jqGrid 4.12.1 or to the current code from GitHub (jqGrid 4.12.2-pre). Free jqGrid is the fork of jqGrid, which I develop since the end of 2014. It could improve the performance of your application and simplify the code, because I implemented many features which seems be useful for you.

Free jqGrid support maxHeight option. You need just include maxHeight: 200, which could be good combined with height: "auto" (the default value in free jqGrid). I think that the requirement to avoid the pagination, which you have, is wrong if you have to display more as 500 rows. You can show your customer the performance of scrolling pure HTML table with 1000 rows or free jqGrid with 1000 rows (see the demo) and compare with the demos with paging. The first demo displays 4000 rows with 13 columns using the page size 20. If works much quickly as the demo with 1000 rows. Moreover you can try to sort by any column or to filter the data. The performance is very good. Even the next demo with 40000 rows works more quickly as the demo with 1000 rows without paging. The main goal for the user: to have quick grid, which displays the results almost immediately. JavaScript works quickly enough in modern web browsers and the usage of local paging is understandable intuitive for every user.

The next new free jqGrid options, which could be helpful for you are:

• forceClientSorting: true, which can be used in combination with loadonce: true if the server don't returns data sorted based on sortname and sortorder. The usage of forceClientSorting: true informs jqGrid to sort the data from the server response before displaying there.
• multiPageSelection: true option can be used in combination with well-known multiselect: true option. Typically jqGrid supports selarrrow parameter (which holds the ids of selected rows) only for one page. The array will be reset to empty array [] during initial loading, during changing to another page and during sorting. The option multiPageSelection: true allows "pre-select" some rows by usage selarrrow (you can set it from the server response inside of beforeProcessing, for example) and to hold selection over all pages. The demo created for the answer demonstrates the feature.
• hidden columns increase the size of the page and make the page slowly because the data will be hold on DOM of the page instead of simple holding the data inside of JavaScript arrays/objects. The option additionalProperties is the new feature of free jqGrid, which solves the problem. Old versions of jqGrid loads and saves in local data parameter only the data for columns (for colModel), but the colModel creates the columns in the resulting grid. Thus one uses typically hidden: true property for such data. The option additionalProperties hold the array of additional properties of input data, which needed be read and saved locally. The option additionalProperties: ["taskId", "isFinal"] for example read and saves locally taskId and isFinal properties from every item of input data. The properties can be used inside of custom formatters, cellattr, rowattr, for sorting and filtering. Another form of usage would be additionalProperties: [{ name: "taskId", sorttype: "integer"}, "isFinal"], where the item of additionalProperties have the same format like colModel item. It inform free jqGrid that the field taskId should be interpreted as integer during sorting or filtering. The demo shows the usage of additionalProperties in the searching dialog.

Another thing which you asked in the comment to your question. The method getRowData is helpful for reading the data from the current page (you will see the difference if you use pager: true and set rowNum to the value which less as the number of items in the grid). Moreover getRowData use unformatter to decode the formatted data from the page to convert to initial format of data. The getRowData without rowid parameters can be used to get all data from the page. On the other side getGridParam just return the reference to internal data parameter with all data read from the server. $("#grid").jqGrid("getGridParam", "data") works very quickly and contains all data from all pages.

Another common question which ask many developers: should I download free jqGrid and uses the references to local copy of jqGrid files (jquery.jqgrid.min.js and ui.jqgrid.min.css) or to use URLs to CDN described in the wiki article? I recommend everybody to use CDN. You can use local copy as fallback path for the case that internet is not available. There are many ways to implement fallback behavior if it's really required. If you provide public web site available from Internet, then you really should use CDN. I can try to explain below why it's so.

First of all some specific version of jqGrid, jQuery or other common files are not changeable. The new version of the files will have another version and so another path on CDN. Thus the data loaded from http://cdn.jsdelivr.net/free-jqgrid/4.12.1/js/jquery.jqgrid.min.js for example will be always the same.

The recommended way for the usage of jqGrid, like jQuery and other common JavaScript libraries and CSS frameworks is the usage from CDN. Here you can find the code example and here the working demo, which uses all dependent files from CDN. The main advantage: the required files will be used from the local cache mostly and when one really need to download the files, the files will be loaded very quickly from any location on the world. I try to explain the reason.

Let us you load free jqGrid file from http://cdn.jsdelivr.net/free-jqgrid/4.12.1/css/ui.jqgrid.min.css and from http://cdn.jsdelivr.net/free-jqgrid/4.12.1/js/jquery.jqgrid.min.js. You can examine the HTTP headers of the severer response to understand the reason. Let us we examine the headers of jquery.jqgrid.min.js. It looks like

HTTP/1.1 200 OK
Date: Sun, 07 Feb 2016 11:46:33 GMT
Content-Type: application/javascript; charset=utf-8
Transfer-Encoding: chunked
Connection: keep-alive
Last-Modified: Tue, 19 Jan 2016 13:22:55 GMT
Vary: Accept-Encoding
ETag: W/"569e38af-4d806"
Access-Control-Allow-Origin: *
Timing-Allow-Origin: *
Cache-Control: public, max-age=31536000
Server: NetDNA-cache/2.2
X-Cache: MISS
Content-Encoding: gzip

The total number of initially loaded data are 121.791 bytes (headers:418; body:121.373).

I don't want to comment all the HTTP headers, only some the most important:

• The initial loaded data are compressed.
• The header Cache-Control: public, max-age=31536000 allows to cache the loaded data in cache of web browser or the proxy during 365 days (356*24*60*60). If the user loads the same page next time that no request to the server will be done.

• The header ETag: W/"569e38af-4d806" and Last-Modified: Tue, 19 Jan 2016 13:22:55 GMT are very important to re-validating the data. If the user press F5 to reload the data, but it hold still the data locally, then the request to the server to get jquery.jqgrid.min.js will contains the ETag from the cached version of the file. The request will contains HTTP headers

  If-Modified-Since: Tue, 19 Jan 2016 13:22:58 GMT If-None-Match: W/"569e38b2-acbef"

You can verify that response from http://cdn.jsdelivr.net/free-jqgrid/4.12.1/js/jquery.jqgrid.min.js will contains only 320 bytes, which starts with

HTTP/1.1 304 Not Modified

It means that the server confirms that the previously loaded version of jquery.jqgrid.min.js can be used. Thus jquery.jqgrid.min.js will be "reloaded" very quickly.

Finally I should remark that both the initial loading of data and response on the re-validation request will be get from cdn.jsdelivr.net really quickly. The web site have mirror servers in many locations on the word and the servers are optimized for re-validation responses.

I hope that it's clear now why I recommend to use CDN like cdn.jsdelivr.net as the primary source for loading free jqGrid files.