Author Topic: Data Loading taking long time  (Read 3027 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: 5787
    • View Profile
Re: Data Loading taking long time
« Reply #1 on: October 30, 2017, 10:58:05 pm »
[ Only Pro members may read this post. ]

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: 5787
    • View Profile
Re: Data Loading taking long time
« Reply #3 on: October 31, 2017, 08:09:57 pm »
[ Only Pro members may read this post. ]

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: 5787
    • View Profile
Re: Data Loading taking long time
« Reply #5 on: November 02, 2017, 12:28:26 am »
[ Only Pro members may read this post. ]