DWR data loading in grid takes time

Question

I have a DWR call which loads 5000 records in the grid. It takes 10 secs to load. I would like to minimize it. I have yet another dwr call in the header which loads two dropdowns. I have removed the dropdown and checked the performance. Even then it takes much time to load. Can someone help me out to reduce the time taken to load the gird ?

Below is my code.

DataHandler.getAssignedTasks(Id, Role, Type, city, Flag, Loc, Month, cat, Act, 
        { callback : function(data){    
    /**
     * Setting result values into local variable
     */
    resultSet = data;
    var Grid = $("#Grid");

    /**
     * Deciding the sorting format according to the Date format.
     */ 
    var sortingType = "";
    if("yy/mm/dd" == gUserDateFormat)
    {
        sortingType = 'text';            
    }
    else if("dd/mm/yy" == gUserDateFormat)
    {
        sortingType = 'date';
    }

    /**
     * Configure the grid for the required fields with values and load the data in
     * the DIV 'taskGrid'
     */

    Grid.jqGrid({
        datatype : "local",
        data : resultSet,
        height : (gridRows * 7) + 5,
        width : pageInnerWidth - (pageInnerWidth * 0.1225),
        sortable : false,
        ignoreCase : true,
        sortorder : "desc",
        colNames : ['Title', 'Location','Act', 'mat', 'Date', 'Status', 'Action', 'Aging', 'Imp', 'Mon', 'Rev', 'Type', 'city'],
        colModel : [{
            name : 'title',
            index : 'title',
            formatter : function(cellValue, rowObject) {
                return '<a href="taskDetails?taskId=' + rowObject.rowId + '" target="_blank">' + cellValue + '</a>';
            },
            width : '160',
            align : 'left',
            sorttype : 'text'
        },{
            name : 'cLocation',
            index : 'cLocation',
            width : '275',
            align : 'left',
            sorttype : 'text',
            hidden : hideLocationData
        },{
            name : 'act',
            index : 'act',
            width : '160',
            align : 'left',
            sorttype : 'text'
        }, {
            name : 'mat',
            index : 'mat',
            width : '160',
            align : 'left',
            sorttype : 'text'
        },{
            name : 'date',
            index : 'date',
            width : '120',
            align : 'left',
            sorttype : sortingType, 
            datefmt: 'd/m/Y',
            sortable: true,
            formatoptions: {srcformat: 'd/m/Y', newformat:'d/m/Y'}
        }, {
            name : 'status',
            index : 'status',
            width : '110',
            align : 'left',
            sorttype : 'text'
        }, {
            name : 'actionLink',
            index : 'actionLink',
            formatter : function(cellValue, rowObject) {
                return '<a href="companyDetails?taskId=' + rowObject.rowId + '" target="_blank">' + cellValue + '</a>';
            },
            width : '80',
            align : 'left',
            sortable : false,
            searchable : false,
            hidden : hideActionLink
        }, {
            name : 'aging',
            index : 'aging',
            width : '70',
            align : 'left',
            sorttype : 'numeric'
        }, {
            name : 'imp',
            index : 'imp',
            width : '120',
            align : 'left',
            sorttype : 'text',
            hidden : hideimpData
        }, {
            name : 'mon',
            index : 'mon',
            width : '120',
            align : 'left',
            sorttype : 'text',
            hidden : hideMonData
        }, {
            name : 'revName',
            index : 'revName',
            width : '120',
            align : 'center',
            sorttype : 'text',
            hidden : hideRevData
        }, {
            name : 'typeName',
            index : 'typeName',
            width : '5',
            align : 'center',
            sorttype : 'text',
            hidden : true,
            searchoptions : { searchhidden : true }
        }, {
            name : 'cityName',
            index : 'cityName',
            width : '5',
            align : 'center',
            sorttype : 'text',
            hidden : true,
            searchoptions : { searchhidden : true }
        }
        ],
        rowList : [ 15, 30, 50, 75, 100 ],
        pager : '#taskPager',
        rowNum : gridRows,
        altRows : true,
        altclass : "myclass",
        viewrecords : true
    });

    if (!searchEnabledOnTaskGrid)
    {
        /**
         * Configure the grid 'taskGrid' to enable search on fields
         */
        taskGrid.jqGrid('filterToolbar',{
            searchOnEnter : false,
            defaultSearch : "cn",
            beforeSearch : function(){
                if (specialCharactersCheck($("#gs_title").val())
                    || specialCharactersCheck($("#gs_cLocation").val())
                    || specialCharactersCheck($("#gs_act").val())
                    || specialCharactersCheck($("#gs_mat").val())
                    || specialCharactersCheck($("#gs_date").val())
                    || specialCharactersCheck($("#gs_statusText").val())
                    || specialCharactersCheck($("#gs_actionLink").val())
                    || specialCharactersCheck($("#gs_aging").val())
                    || specialCharactersCheck($("#gs_impName").val())
                    || specialCharactersCheck($("#gs_monName").val())
                    || specialCharactersCheck($("#gs_revName").val())
                    || specialCharactersCheck($("#gs_typeName").val())
                    || specialCharactersCheck($("#gs_cityName").val()))
                {
                    return true;
                }
                else
                {
                    valtypeName = $("#typeName option:selected").text();
                    if (valTaskType == "Show All")
                    {
                        valtypeName = "";
                    }

                    valcity = $("#city option:selected").text();
                    if (valcity == "Show All")
                    {
                        valcity = "";
                    }

                    var myGrid = $("#taskGrid");
                    var myFilter = {groupOp: "AND", mats: []};
                    var postData = myGrid.jqGrid('getGridParam','postData');
                    var searchData = jQuery.parseJSON(postData.filters);
                    for (var iMat = 0; iMat < searchData.rules.length; iMat ++)
                    {
                        myFilter.mats.push({ field: searchData.mats[iMat ].field, op: "cn", data: searchData.mats[iMat ].data });
                    }
                    if (valtypeName .length !== 0)
                    {
                        myFilter.mats.push({ field: "typeName", op: "cn", data: valtypeName  });
                    }
                    if (valcity.length !== 0)
                    {
                        myFilter.mats.push({ field: "cityName", op: "cn", data: valcity });
                    }
                    myGrid[0].p.search = true;
                    $.extend(myGrid[0].p.postData, { filters: JSON.stringify(myFilter) });
                    myGrid.trigger("reloadGrid", [{ page: 1, current: true}]);
                    return true;
                }
            }
        });

        searchEnabledOnTaskGrid = true;
    }
        },
    errorHandler : function(){
    },
    async : false
});

Anyways to reduce the time it takes to load ?

Answer 1

I think that the problem with 10 secs to load is not in loading of 5000 rows. The only problem is that you use rowNum : gridRows and try to display all rows at once. The display can't show all 5000 rows to the use and you spend 99% time in filling the part of the page which is not visible. I recommend you to set some more reasonable value for rowNum, for example rowNum: 50. I recommend you to use height: "auto" instead of height : (gridRows * 7) + 5 additionally. The user will can use local paging, sorting and filtering. All (paging, sorting and filtering) will work very quickly in the case.

I any way I would you strictly recommend to add gridview: true as the grid option to improve performance of the grid without any additional disadvantages. See the answer for additional information.