CODEWITHSUNDEEP
jqueryjqgridfree-jqgrid
SK.
SK.

Reputation: 1510

Mass edit performance in free-jqgrid

Need help in latest version of free-jqgrid when I do mass edit (inline edit of 100 rows at one time). It was really fast in JQGrid 4.3.1 After upgrading to free-jqgrid 4.13.6, I see it is very slow. I crated a similar example. This standalone example is not bad in performance. But I am not sure why it is taking long time to do inline edit in my application. Any hints would be a great help. In this example, check the multiselect check box (at the top left corner of the grid) and then click the button (at the top). Basically trying to understand when doing inline edit what all factors are taken into consideration.

Note: Just now realized that the single row inline edit also takes 2-3 seconds. which was really fast in 4.3.1. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>http://stackoverflow.com/q/27617764/315935</title>
    <meta name="author" content="Oleg Kiriljuk">
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css">
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
    <!--<link rel="stylesheet" href="jqGrid/css/ui.jqgrid.css">-->
    <link rel="stylesheet" href="http://rawgit.com/free-jqgrid/jqGrid/master/css/ui.jqgrid.css">
    <style type="text/css">
        html, body { font-size: 75%; }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script type="text/javascript">
        $.jgrid = $.jgrid || {};
        $.jgrid.no_legacy_api = true;
        $.jgrid.useJSON = true;
    </script>
    <script src="http://rawgit.com/free-jqgrid/jqGrid/master/js/jquery.jqgrid.src.js"></script>
    <!--<script src="jqGrid/js/jquery.jqGrid.src.js"></script>-->
    <script type="text/javascript">
    //<![CDATA[
        /*global $ */
        /*jslint eqeq: true, browser: true, plusplus: true */
        $(function () {
            "use strict";
            var $grid = $("#list"),
                gridData,
                startTime,
                measureTime = false,
                timeInterval;

            var date = new Date(), t = Object.prototype.toString.call(date), t1 = String(date);

            //alert("start to generate the data");
           // gridData = getGridData(100);
       // console.log(gridData);
            //alert("start to fill the grid")
            startTime = new Date();
            $grid.jqGrid({
                datatype: 'json',
        url: 'https://api.myjson.com/bins/efhbt',
        mtype: 'GET',
                colNames: ['aa', 'bb', 'cc', 'dd', 'ee', 'ff', 'gg', 'hh', 'ii', 'jj', 'kk', 'll', 'mm'],
        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", editable: true, stype: 'select', formatter: 'select',
            edittype: 'select', editoptions: {
                value: 'Select:Select;Y:Yes;N:No',
                multiple: false
            }
            },
                    { name: "hh", label: "c08", editable: true, stype: 'select', formatter: 'select',
            edittype: 'select', editoptions: {
                value: 'Select:Select;Y:Yes;N:No',
                multiple: false
            }
            },
                    { name: "ii", label: "c09", editable: true, stype: 'select', formatter: 'select',
            edittype: 'select', editoptions: {
                value: 'Select:Select;Y:Yes;N:No',
                multiple: false
            }
            },
                    { name: "jj", label: "c10", editable: true },
                    { name: "kk", label: "c11", editable: true },
                    { name: "ll", label: "c12", editable: true },
                    { name: "mm", label: "c13", editable: true }
                ],
                cmTemplate: { width: 100, autoResizable: true },
                rowNum: 1000,
        records: 1000,
                rownumWidth: 40,
                rowList: [20, 100, 1000, 10000, "100000:All"],
                viewrecords: true,
                rownumbers: true,
                toppager: false,
                pager: false,
                shrinkToFit: false,
        multiselect: true,
        editurl: 'clientArray',
        loadonce: true,
                onSortCol: function () {
                    startTime = new Date();
                    measureTime = true;
                },
        /*onSelectRow: function (rowid) {
                    var $self = $(this),
                        savedRow = $self.jqGrid("getGridParam", "savedRow");
                    if (savedRow.length > 0) {
                        $self.jqGrid("restoreRow", savedRow[0].id);
                    }
                    $self.jqGrid("editRow", rowid);
                },*/
                loadComplete: function () {
                    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 () {
                        startTime = new Date();
                        measureTime = true;
                        return false; // allow filtering
                    }
             }).jqGrid("gridResize");

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




         // On Click Of Button
         $( "#Change_Value" ).click(function() {
        var v = $("#name").val();
        var myGrid = $("#list");
        var selRowIds = myGrid.jqGrid("getGridParam", "selarrrow");
        //alert(selRowId.length);
        for (var i = 0; i < selRowIds.length; i++) {
            //rowData = myGrid.jqGrid("getLocalRow", selRowIds[i]);
            // one can uses the data here
            myGrid.jqGrid("editRow", selRowIds[i], true);
        }
        });


        });
    //]]>
    </script>
</head>
<body>
    <div>
    <input type="text" name="name" id="name" />
    <input type="button" name="Change_Value" id="Change_Value" value="Change Value" /> 
    </div>
    <div>
    <table id="list"></table>

    </div>
</body>
</html>

Upvotes: 0

Views: 760

Answers (1)

Oleg
Oleg

Reputation: 221997

The "mass editing" (inline edit of 100 rows at one time) is bad in general because it produces a lot of changes on the page and every change of one element follow web browser reflow for all existing elements. Moreover displaying of the grid with 100 rows, where only about 25 are visible for the user (because of natural restriction of the monitor), reduce the performance additionally.

Compare the performance of the initial demo with another one, where I just included call of jQuery.hide before "mass editing" and jQuery.show after "mass editing":

myGrid.hide(); // !!! new line
for (var i = 0; i < selRowIds.length; i++) {
    myGrid.jqGrid("editRow", selRowIds[i], true);
}
myGrid.show(); // !!! new line

If you would use local paging with 25 rows, like on the next demo you will increase the performance of the page additionally. Start of editing of 100 rows on initial demo takes on in my test about 1065 ms, the demo with editing of previously hiding grid takes 330 ms and the editing of 25 rows (local paging) takes 90 ms.

UPDATE: If you use frozen columns in the grid then you should destroy frozen columns by call of destroyFrozenColumns before the loop, where you call editRow, and then recreate the frozen columns by new call of setFrozenColumns. It should improve the performance additionally.

Upvotes: 1

Related Questions