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

have setup grid gets records java back-end.the data sent in json format , hence use datatype json in jqgrid. have used suggestions in forums , i.e., have tried including properties still performance drastic when records count retrieved java > 500 rows. , slow in ie in ff rendering pretty fast , work fine.

please not don't want pagination records should shown vertical scroll bar available within grid.

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

    type: "post",     cache: false,     url: '............',      datatype: "json",     viewrecords: false,     gridview: true, // tried false     pgtext: "",     ignorecase: true,     rownumbers: true,     pginput: false,     loadonce: true, // tried setting loadonce:false , no luck     pager: false,     celledit: true,     pgbuttons: false,     editurl: 'clientarray',     beforeprocessing: function (data) { //setting rownum, if not set shows 20 records 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 grid , not browser             }         }         else if (data.length == 0) {             ..............         }     } 

i'd recommend upgrade latest free jqgrid 4.12.1 or current code github (jqgrid 4.12.2-pre). free jqgrid fork of jqgrid, develop since end of 2014. improve performance of application , simplify code, because implemented many features seems useful you.

free jqgrid support maxheight option. need include maxheight: 200, combined height: "auto" (the default value in free jqgrid). think requirement avoid pagination, have, wrong if have display more 500 rows. can show customer performance of scrolling pure html table 1000 rows or free jqgrid 1000 rows (see the demo) , compare demos paging. the first demo displays 4000 rows 13 columns using page size 20. if works demo 1000 rows. can try sort column or filter data. performance good. the next demo 40000 rows works more demo 1000 rows without paging. main goal user: have quick grid, displays results immediately. javascript works enough in modern web browsers , usage of local paging understandable intuitive every user.

the next new free jqgrid options, helpful are:

• forceclientsorting: true, can used in combination loadonce: true if server don't returns data sorted based on sortname , sortorder. usage of forceclientsorting: true informs jqgrid sort data server response before displaying there.
• multipageselection: true option can used in combination well-known multiselect: true option. typically jqgrid supports selarrrow parameter (which holds ids of selected rows) only 1 page. array reset empty array [] during initial loading, during changing page , during sorting. option multipageselection: true allows "pre-select" rows usage selarrrow (you can set server response inside of beforeprocessing, example) , hold selection on pages. the demo created the answer demonstrates feature.
• hidden columns increase size of page , make page because data hold on dom of page instead of simple holding data inside of javascript arrays/objects. option additionalproperties new feature of free jqgrid, solves problem. old versions of jqgrid loads , saves in local data parameter data columns (for colmodel), colmodel creates columns in resulting grid. 1 uses typically hidden: true property such data. option additionalproperties hold array of additional properties of input data, needed read , saved locally. option additionalproperties: ["taskid", "isfinal"] example read , saves locally taskid , isfinal properties every item of input data. properties can used inside of custom formatters, cellattr, rowattr, sorting , filtering. form of usage additionalproperties: [{ name: "taskid", sorttype: "integer"}, "isfinal"], item of additionalproperties have same format colmodel item. inform free jqgrid field taskid should interpreted integer during sorting or filtering. the demo shows usage of additionalproperties in searching dialog.

another thing asked in comment question. method getrowdata helpful reading the data current page (you see difference if use pager: true , set rownum value less number of items in grid). getrowdata use unformatter decode formatted data page convert initial format of data. getrowdata without rowid parameters can used data page. on other side getgridparam return reference internal data parameter data read server. $("#grid").jqgrid("getgridparam", "data") works , contains all data pages.

another common question ask many developers: should download free jqgrid , uses references local copy of jqgrid files (jquery.jqgrid.min.js , ui.jqgrid.min.css) or use urls cdn described in the wiki article? i recommend use cdn. can use local copy fallback path case internet not available. there many ways implement fallback behavior if it's required. if provide public web site available internet, should use cdn. can try explain below why it's so.

first of specific version of jqgrid, jquery or other common files not changeable. new version of files have another version , path on cdn. data loaded http://cdn.jsdelivr.net/free-jqgrid/4.12.1/js/jquery.jqgrid.min.js example always same.

the recommended way usage of jqgrid, jquery , other common javascript libraries , css frameworks the usage cdn. here can find code example , here working demo, uses dependent files cdn. main advantage: the required files used local cache , when 1 need download files, files loaded location on world. try explain reason.

let load free jqgrid file http://cdn.jsdelivr.net/free-jqgrid/4.12.1/css/ui.jqgrid.min.css , http://cdn.jsdelivr.net/free-jqgrid/4.12.1/js/jquery.jqgrid.min.js. can examine http headers of severer response understand reason. let examine headers of jquery.jqgrid.min.js. 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 loaded data 121.791 bytes (headers:418; body:121.373).

i don't want comment http headers, important:

• the initial loaded data compressed.
• the header cache-control: public, max-age=31536000 allows cache loaded data in cache of web browser or proxy during 365 days (356*24*60*60). if user loads same page next time no request server done.

• the header etag: w/"569e38af-4d806" , last-modified: tue, 19 jan 2016 13:22:55 gmt important re-validating data. if user press f5 reload data, hold still data locally, request server jquery.jqgrid.min.js contains etag cached version of file. request contains http headers

  if-modified-since: tue, 19 jan 2016 13:22:58 gmt if-none-match: w/"569e38b2-acbef"

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

http/1.1 304 not modified 

it means server confirms loaded version of jquery.jqgrid.min.js can used. jquery.jqgrid.min.js "reloaded" quickly.

finally should remark both initial loading of data , response on re-validation request cdn.jsdelivr.net really quickly. web site have mirror servers in many locations on word , servers optimized re-validation responses.

i hope it's clear why recommend use cdn cdn.jsdelivr.net primary source loading free jqgrid files.