Increase jQGrid Performance

Question

Hi I am using jQGrid free version 4.1.2 and I am facing problem on loading tree grid. I am storing data in an array object and loading that in tree grid. When I am loading a small amount of data it is working fine but when the data is more of quantity it is taking to much time in rendering (setting the data in columns). The length of my array object is around 1700.

I am using below prperties to load the grid

 grid.jqGrid({
            datatype: "jsonstring",
            datastr: mydata,  //array object
            colNames: scopes.gridheadercolumns, //passed externally
            colModel: scopes.gridcolumns,      
            height: height, //passed externally
            gridview: true,
            loadonce: false,
            viewrecords: viewrecordslist,
            rowList: rowlists,
            rowNum: rowNum,
            multiSort: true,
            ignoreCase: true,
            grouping: gpenable,
            sortorder: sortorder,  //passed externally
            autowidth: true,
            sortable: false,
            pager: "#" + pagerid,   //passed externally
            treeGrid: true,
            treeGridModel: 'adjacency',
            treedatatype: "local",
            ExpandColumn: 'name',
            sortname: 'name',
            jsonReader: {
                repeatitems: false,
                root: function (obj) { return obj; },
                page: function () { return 1; },
                total: function () { return 1; },
                records: function (obj) { return obj.length; },
                expanded_field: "true"
            },
            loadComplete: function () {
                var ts = this;

                if (ts.p.reccount === 0) {
                    $(this).hide();
                    emptyMsgDiv.show();
                } else {
                    $(this).show();
                    emptyMsgDiv.hide();
                }

            }
        });

I have changed some of above properties like this

loadonce: true,
gridview: false,
treedatatype :"jsonstring" 

Here which property can I remove from the function to make it load faster or what else can I do to improve the performance is I need.

Also, this problem occur specifically in IE 11. Not in other browser.

Any help would be appreciated. Thanks

Edit : I forgot to include one point that grid also become considerably slow when we load it muliple times. How can we ensure that performance not degrade with multiple request.

Code for tdynamicLink Formatter -

Here the foramtoptions url and cellattr are not used.

Only I am applying a class to make it look as a link (I am just making text underline and cursor to pointer in that class) and calling function getPopup to open modal window

 if (formatter == "editLink") {

                    var subpopup = grid_row_data[j]._attr.popupid._value;
                    var xmlname = grid_row_data[j]._attr.popxml._value;
                    formatter= 'dynamicLink';
                    formoption= {
                            url: function (cellValue, rowId, rowData) {
                                return '/' + rowId + '?' + $.param({
                                tax: rowData.col_nigo,
                                invdate: rowData.col_igo_nigo,
                                closed: rowData.col_phireq
                            });
                        },
                        cellValue: function (cellValue, rowId, rowData) {
                            return  '<span class="pointer">' + cellValue + '</span>'; 
                            },
                        onClick: function (rowId, iRow, iCol, cellValue, e) {
                            $("#"+subpopup).css("display", "block");
                            $("#" + popupid).css("opacity", "0.99");
                            $scope.getPopup(rowId, iRow, iCol,gridid ,xmlname,rowId);                      
                        }
                    };
                    cellattr = function (rowId, cellValue, rawObject) {
                        var attribute = ' title="' + rawObject.name;
                        if (rawObject.closed) {
                            attribute += ' (closed)';
                        }
                        return attribute + '"';
                    };
            }

Answer 1

Sorry, but the most tricks which you use should have no value and the usage of treedatatype: "jsonstring" should be incorrect. TreeGrid reset many parameters during initialization, because some specific values are really required. See the lines of code for more details. For example, loadonce: true has some value only in case of loading the data from the server (datatype: "json" or datatype: "json") and not for TreeGrid. I recommend you remove many unused options to clean-up your code. The options gridview, loadonce, rowList, rowNum, grouping, sortable, treedatatype like the most of properties of jsonReader (or probably whole jsonReader) should be removed.

Now about your main problem. I see only two ways to improve performance of TreeGrid

1. Upgrade to free jqGrid 4.10.0 from 4.1.2. It improves the performance of creating/loading the grid and essentially improves the performance of collapsing/expanding of nodes.
2. Create and fill the hidden TreeGrid and then make it visible. You can place <table>, used for the grid, inside of the div. The div should have the width which corresponds the width of window. The div should be visible. You should get the width of the div using jQuery.width and to use teh value as the width value of jqGrid. Then you hide the div with respect of jQuery.hide. Now you can create TreeGrid, which will be not visible. Finally, you should make the outer div visible and the TreeGrid will be visible too.