How to improve performance of JQGrid when trying to resize it after loading?

Question

I am having JQgrid this way,

<div id="dialogLoading" style="position:absolute;z-index:1005">
    <img src="http://blog.teamtreehouse.com/wp-content/uploads/2015/05/InternetSlowdown_Day.gif" />
</div>
<table id="list"></table>


$(function () {
    "use strict";
    var getGridData = function(n) {
            var data = [], i;
            for (i = 0; i < n; i++) {
                data.push({
                    id: (i + 1)*10,
                    aa: "aa" + i,      // colunn 1
                    bb: "bb" + (i%3),  // colunn 2
                    cc: "cc" + (i%5),  // colunn 3
                    dd: "dd" + (i%7),  // colunn 4
                    ee: "ee" + (i%11), // colunn 5
                    ff: "ff" + (i%13), // colunn 6
                    gg: "gg" + (i%17), // colunn 7
                    hh: "hh" + (i%19), // colunn 8
                    ii: "ii" + (i%23), // colunn 9
                    jj: "jj" + (i%29), // colunn 10
                    kk: "kk" + (i%31), // colunn 11
                    ll: "ll" + (i%37), // colunn 12
                    mm: "mm" + (i%41)  // colunn 13
                });
            }
            return data;
        },
        $grid = $("#list"),
        gridData,
        startTime,
        measureTime = false,
        timeInterval;

    gridData = getGridData(3000);
    startTime = new Date();
    $("#list").jqGrid('GridUnload');
    var grid = $("#list");
    grid.bind('jqGridLoadComplete',function(e,data) {
        setSizeOfgrid();
    });
    $grid.jqGrid({
        data: gridData,
        colModel: [
            { name: "aa", label: "c01" },
            { name: "bb", label: "c02" },
            { name: "cc", label: "c03" },
            { name: "dd", label: "c04" },
            { name: "ee", label: "c05" },
            { name: "ff", label: "c06" },
            { name: "gg", label: "c07" },
            { name: "hh", label: "c08" },
            { name: "ii", label: "c09" },
            { name: "jj", label: "c10" },
            { name: "kk", label: "c11" },
            { name: "ll", label: "c12" },
            { name: "mm", label: "c13" }
        ],
        cmTemplate: { width: 100, autoResizable: true },
        iconSet: "fontAwesome",
        rowNum: 20,
        rownumWidth: 40,
        rowList: [20, 100, 1000, 10000, "100000:All"],
        viewrecords: true,
        rownumbers: true,
        toppager: true,
        pager: true,
        shrinkToFit: false,
        onSortCol: function () {
            startTime = new Date();
            measureTime = true;
        },
        loadComplete: function () {
            closeDialogLoading();
            if (measureTime) {
                setTimeout(function () {
                    alert("Total loading time: " + timeInterval + "ms");
                }, 50);
                measureTime = false;
            }
        },
        autoencode: true,
        caption: "Shows the performance of resizing. Make double-click on the column resizer"
    }).jqGrid("filterToolbar", {
        beforeSearch: function () {
            var $self = $(this);
            openDialogLoading();
            setTimeout(function () {
                $self.jqGrid("setGridParam", { search: true })
                    .trigger("reloadGrid", [{ page: 1 }]);
            }, 0);
            startTime = new Date();
            measureTime = true;
            return true; 
        }
    }).jqGrid("gridResize");

    timeInterval = new Date() - startTime;
    setTimeout(function () {
        alert("Total time: " + timeInterval + "ms");
    }, 50);

    function openDialogLoading(){
        $("#dialogLoading").css("display", "");
    }

    function closeDialogLoading(){
        $("#dialogLoading").hide();
    }

});



function setSizeOfgrid()
{
    $("#list").on("jqGridAfterLoadComplete jqGridRemapColumns", function () {
        var $this = $("#list"),
        colModel = $this.jqGrid("getGridParam", "colModel"),
        iCol,
        iRow,
        rows,
        row,
        n = $.isArray(colModel) ? colModel.length : 0,
        cm;
        var rowData = "";
        var rowDataLen="";
        var input = [];
        var colWidth=130;
        for (iCol = 0; iCol < n; iCol++) {
                    cm = colModel[iCol];
                    var is = cm.name.indexOf("c07");
                    var wm = cm.name.indexOf("c08");
                    var em = cm.name.indexOf("c09");
                    input = [];
                    for (iRow = 0, rows = this.rows; iRow < rows.length; iRow++) {
                                row = rows[iRow];
                                rowData = $(row.cells[iCol]).attr('title');
                                if(rowData != undefined)
                                {   
                                    rowDataLen = rowData.length;
                                }
                                else if (rowDataLen < colWidth)
                                {   
                                    rowDataLen =colWidth;
                                }   
                                input.push(rowDataLen);
                    }
                    finalWidth =  Math.max.apply(null, input);                  
                    if((is >= 0 || wm >= 0 || em >= 0) && (finalWidth < 300))
                        continue;
                    $("#list").jqGrid("setColWidth", iCol, finalWidth);
                    var gw = $("#list").jqGrid('getGridParam','width');
                    if(gw <=1600)
                    {                       
                        $("#list").jqGrid('setGridWidth',1500);
                    }
                    else{
                        $("#list").jqGrid('setGridWidth',gw);}
               }        
    });     
}

I am trying to resize the grid columns after the grid is completely loaded this way based on the grid content,

var grid = $("#list");
    grid.bind('jqGridLoadComplete',function(e,data) {
        setSizeOfgrid();
    });

so,in method setSizeOfgrid i am actually re-setting the width of columns completely.This is working fine. if i have 1000 records.But if i have records like 10,000 its taking much time to load the grid and also when i try to scroll up or down also its taking too much time.

Is there any other better way to re-size the columns after the grid is loaded without binding event?

Can anyone help me in this issue?

Thanks

score 0 · Answer 1 · answered Apr 13 '16 at 15:41

I'm not sure what scenario you want to implement. The tests with 10000 rows without paging are needed only to measure the performance. Such tests have no value for the reality because the possibility to allow to display 10000 or even 1000 rows in real application would be clear bug in the program. The monitor allows to display 20-30 rows only. Displaying of 10000 rows instead means making the page in more as 1000 times slowly without any advantages for the user. The user will see only 20-30 rows and he have to make clicks to scroll and to see the other content. The usage of local paging makes the page more responsible and more user friendly.

The code of the function setSizeOfgrid seems me a little strange too. It seems that you try to implement the behavior of autoResizeColumn method (see the wiki article). To see the performance of its work you can get the demo, to choose to display 1000 rows (10000 seems to me really unrealistic) and then make double-click between the column headers. It will call autoResizeColumn method ($("#grid").jqGrid("autoResizeColumn", columnName);), which get the width of all textes from all cells of the columns and to change the width of the column. You can include the options like autoResizing: { minColWidth: 30, maxColWidth: 130 } to restrict the min and max value of the column during the automatic width resizing. The second boolean parameter of autoResizeColumn allows to force adjustment the width of the grid after the resizing of the column.

How to improve performance of JQGrid when trying to resize it after loading?

1 Answers1