PqGrid FillHandle Makes Page Unresponsive

[vijay@spinetechnologies]

Dear Team,

We are using PqGrid Version 9.0.1,
we have enabled filehandle: all option. When we double click to apply data to all records then the page becomes unresponsive and takes a longer time to apply data for all records.


Note*
No. of records displayed in the grid is 21000,
we have enabled virtual rendering (virtualX: true, virtualY: true)
Find the attached screenshot for your reference.

Kindly suggest how to handle above scenario.

[paramvir]

It's supposed to work fine with 21,000 records unless there are slow performance column dependencies or computations associated with that column cells.

Kindly check any such dependencies or share a jsfiddle to help resolve it.

[vijay@spinetechnologies]

We have tried below sample code to generate the scenario.
When we click the Plus icon on the Country column dropdown to apply all rows then same issue occurs.


    $(function () {       
        var colModel = [
            { title: "Customer ID", dataIndx: "customerid", width: 120 },
            {
                title: "Country", width: "120", dataIndx: "country",
                style: { 'background-color': 'beige' },
                cls: 'pq-drop-icon',
                editor: {
                    type: 'select',
                    options: function(){
                   return ['Green', 'Yellow', 'Blue'];
                    }
                }
            },
            { title: "Company Name", width: 180, dataIndx: "companyname" },
          { title: "Address", width: "170", dataIndx: "address" }
      ];
       
      var dataModel = function(){
      
         var data = [];
         
         for(i=0; i<=200000; i++){
            data.push({'customerid':`C00${i}`, 'country':'', 'companyname':`test ${i}`,'address':`test location ${i}`});
         }         
         return data;
      }
      
      
        var newObj = {
            width: 'auto',
            editModel: { clicksToEdit: 1, addDisableCls: true },
         pageModel: { type: "local", rPP: 20, strRpp: "{0}", strDisplay: "{0} to {1} of {2}" },       
            dataModel: { data: dataModel() },
            showTitle: false,
            showBottom: false,
            colModel: colModel,           
         fillHandle: 'all',
            copyModel: { header: true },           
            cellSave: function (evt, ui) {
                //refresh the row to update the read only cells.               
                this.refreshRow({rowIndx: ui.rowIndx});
            },
            scrollModel: { autoFit: true },
            title: "Contact Details"
        };
        $("#grid_readonly").pqGrid(newObj);
    });

[paramvir]

It works fine for 21,000 records.

I understand it's quite slow for 2,00,000 records but it's due to paging. If paging is removed, then it works fine in that case too.

Autofill is mostly a spreadsheet feature in which paging is not used.

Autofill with paging performance issues would be looked into in next version.

[vijay@spinetechnologies]

Can we disable double-click on the Plus Icon to fill data?

[paramvir]

Following code disables the double click on autofill.

Code: [Select]

$.paramquery.cFillHandle.prototype.onDblClick = function(){
return function(){};
}