Author Topic: Data Loading taking long time  (Read 3375 times)

rgorantla

  • Pro Deluxe
  • Jr. Member
  • *
  • Posts: 88
    • View Profile
Data Loading taking long time
« on: October 30, 2017, 10:49:45 pm »
Hi,

Have 1000 rows and 129 columns. if i load 350 rows it it taking 3 sec but more than that it is taking long time.(20-30 sec)

SQL - 500 ms - so no issue there. I think the problem is - long json  taking time in datamodel.

Any thoughts?

How do we load chunks of data and append later?



paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6296
    • View Profile
Re: Data Loading taking long time
« Reply #1 on: October 30, 2017, 10:58:05 pm »
That might be due to non virtual mode.

Please enable virtual mode by

adding virtualX: true and virtualY: true to main grid initialization object.

rgorantla

  • Pro Deluxe
  • Jr. Member
  • *
  • Posts: 88
    • View Profile
Re: Data Loading taking long time
« Reply #2 on: October 30, 2017, 11:38:05 pm »
This is my obj and i do have Virtual mode on
    var obj = {
        dataModel: dataModel,
        width: "100%",
        height: 425,
        copy: false,
        virtualX: true,
        virtualY: true,
        fillHandle: 'vertical',
        filterModel: { type: 'local', header: true },       
        pageModel: { type: 'local', rPP: 800, rPPOptions: [800, 1600] },
        scrollModel: { lastColumn: null },
        colModel: columns,
        editModel: {
            clicksToEdit: 1
        },
        selectionModel: { column: true },
        numberCell: false,
        freezeCols: 1,
        resizable: true,
        // For Auto Save Functionality //
        change: function (evt, ui)
        {
            if (ui.source == 'commit' || ui.source == 'rollback') {
                return;
            }

            var rowList = ui.rowList,
                addList = [],
                //   recIndx = grid.option('dataModel').recIndx,
                deleteList = [],
                updateList = [];

            for (var i = 0; i < rowList.length; i++) {
                var obj = rowList,
                    rowIndx = obj.rowIndx,
                    newRow = obj.newRow,
                    type = obj.type,
                    rowData = obj.rowData;
                if (type == 'update') {
                    var valid = grid.isValid({ rowData: rowData, allowInvalid: true }).valid;
                    if (valid) {
                        var jsonstring = { ..... };
                        updateList.push(jsonstring);
                    }
                }
            }
            if (updateList.length)
            {
                var allvalues = { items: updateList }
                $.ajax({
                    url: url,
                    //data: JSON.stringify(allvalues),
                    data: JSON.stringify({ allvalues: allvalues, }),
                    dataType: "json",
                    type: "POST",
                    contentType: 'application/json; charset=utf-8',
                    async: true,
                    beforeSend: function (jqXHR, settings) {
                        $(".saving", grid).show();
                    },
                    success: function (changes) {
                        var state = grid.saveState({ save: false });
                        saveState(state);
                        //commit the changes. 
                        //grid.commit({ type: 'update', rows: changes.updateList });                       
                    },
                    complete: function () {
                        $(".saving", grid).hide();
                    }
                });
            }
           
        },
        create: function (evt, ui) {           
            loadState(this); 
         
        },
        toolbar: {
            items: [
                {
                    type: 'select',
                    cls: 'columnSelector',
                    attr: "multiple='multiple'", style: "height:60px;",
                    options: function (ui) {
                        var CM = this.getColModel(),
                            opts = [];

                        for (var i = 0; i < CM.length; i++) {
                            var obj = {},
                                column = CM;
                            //if (column.cls != "default") {
                            obj[column.dataIndx] = column.title;
                            //}
                            opts.push(obj);
                        }
                        return opts;

                    },
                    listener: function (evt) {
                        var selectedarray = [];
                        var newCM = [];
                        //get array of sel ected options in select list.
                        var arr = $(evt.target).find("option:selected").map(function () {
                            return this.value;
                        }).get(),
                            CM = this.getColModel();
                        //newCM.push(ColSelectorVals);
                        for (var i = 0; i < CM.length; i++) {
                            var column = CM;
                            // if (column.cls != "default") {
                            column.hidden = ($.inArray(dataIndx, arr) === -1);
                            // }
                            if (!($.inArray(CM.dataIndx, ColSelectorVals) === -1)) {
                                newCM.push(column);
                            }
                        }

                        for (var i = 0; i < CM.length; i++) {
                            var column = CM,
                                dataIndx = column.dataIndx;
                            //  if (column.cls != "default") {
                            //hide the column if not a selected option.
                            column.hidden = ($.inArray(dataIndx, arr) === -1);
                            //  }

                            if ($.inArray(CM.dataIndx, ColSelectorVals) === -1) {
                                newCM.push(column);
                            }
                        }
                        this.option("colModel", newCM); // Changing the colmodel to refelect new colmodel i.e., to add columsn at the end not how they are defined.
                        var CM = this.getColModel(),
                            selopts = [];
                        for (var i = 0; i < CM.length; i++) {
                            var column = CM;
                            if (column.hidden !== true) {
                                selopts.push(column.dataIndx);
                            }
                        }
                        ColSelectorVals = selopts.slice(0);// Making the newly selected columns to stay where they are i.e., any new columns will be added at the end not.                   
                        this.option("colModel", this.option("colModel")); //refresh the colModel.                       
                        this.refresh();
                        var state = this.saveState({ save: false });
                        saveState(state);
                    }
                }]
        },
        columnOrder: function (event, ui) {
            var state = this.saveState({ save: false });
            saveState(state);
        }

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6296
    • View Profile
Re: Data Loading taking long time
« Reply #3 on: October 31, 2017, 08:09:57 pm »
data binding is quite fast in the grid, takes only fraction of a second for very large number of rows/ columns.

Next thing to check is how much time it takes to load data in the browser.

You can check it by loading the dataModel url directly in the browser. Time taken can also be checked by opening up network tab in the developer tools in your browser developer tools.

Loading data in chunks is fine for read only data, but it can't be used with batch editing.

You can also look into reducing the number of rows per page if response from your web server/ network is slow.

rgorantla

  • Pro Deluxe
  • Jr. Member
  • *
  • Posts: 88
    • View Profile
Re: Data Loading taking long time
« Reply #4 on: November 01, 2017, 07:05:12 pm »
Most of the data is read only - can you suggest how to do chunks of data?

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6296
    • View Profile
Re: Data Loading taking long time
« Reply #5 on: November 02, 2017, 12:28:26 am »