Columns overlaps in case of the Animation mode is on

[vijay@spinetechnologies]

Hi Paramveer,

I am using the pqGrid Pro (V 9.0.1).

Whenever I opt for the animation mode on, the columns of PQ grids overlap each other while horizontal scroll.

For your ref, I am attaching a screenshot.

Please guide us to resolve the issue.

[paramvir]

Do you get any error in the browser console?

Kindly share a jsfiddle for speedy resolution.

[vijay@spinetechnologies]

Hi Paramvir,

Please find the attached Code,

$(function () {
        var columns = [
            { title: "Order ID", dataIndx: "OrderID" },
            { title: "Customer Name", dataIndx: "CustomerName" },
            { title: "Product Name", dataIndx: "ProductName" },
            { title: "Unit Price", dataIndx: "UnitPrice", dataType: 'float', format: '$#,###.00' },
            { title: "Quantity", dataIndx: "Quantity", dataType: 'integer' },
          { title: "Order Date", dataIndx: "OrderDate" },
          { title: "Required Date", dataIndx: "RequiredDate" },
          { title: "Shipped Date", dataIndx: "ShippedDate" },
            { title: "ShipCountry", dataIndx: "ShipCountry" },
            { title: "Freight", align: "right", dataIndx: "Freight" },
            { title: "Shipping Name", dataIndx: "ShipName" },
            { title: "Shipping Address", dataIndx: "ShipAddress" },
            { title: "Shipping City", dataIndx: "ShipCity" },
            { title: "Shipping Region", dataIndx: "ShipRegion" },
            { title: "Shipping Postal Code", dataIndx: "ShipPostalCode", minWidth: 150 },
         { title: "Order ID", dataIndx: "OrderID" },
            { title: "Customer Name", dataIndx: "CustomerName" },
            { title: "Product Name", dataIndx: "ProductName" },
            { title: "Unit Price", dataIndx: "UnitPrice", dataType: 'float', format: '$#,###.00' },
            { title: "Quantity", dataIndx: "Quantity", dataType: 'integer' },
          { title: "Order Date", dataIndx: "OrderDate" },
          { title: "Required Date", dataIndx: "RequiredDate" },
          { title: "Shipped Date", dataIndx: "ShippedDate" },
            { title: "ShipCountry", dataIndx: "ShipCountry" },
            { title: "Freight", align: "right", dataIndx: "Freight" },
            { title: "Shipping Name", dataIndx: "ShipName" },
            { title: "Shipping Address", dataIndx: "ShipAddress" },
            { title: "Shipping City", dataIndx: "ShipCity" },
            { title: "Shipping Region", dataIndx: "ShipRegion" },
            { title: "Shipping Postal Code", dataIndx: "ShipPostalCode", minWidth: 150 },
         
      ];
        var dataModel = {
            location: "remote",
            dataType: "JSON",
            method: "GET",
            url: "/Content/invoice.json"
        }

        $("#dndgrid").pqGrid({
            dataModel: dataModel,
           
            pageModel: { type: 'local', rPP: 20, rPPOptions: [1, 10, 20, 30, 40, 50, 100] },
            colModel: columns,
            title: "Shipping Orders"  ,   
         flex:{on:true},
         animModel:  { on: true, duration: 400 },
         //resizable: true,
         virtualX: true, virtualY: true,
         
         scroll: function( event, ui ) {this.flex()}
        });       
      
    });

Copy and paste the above code in the https://paramquery.com/pro/demos/dnd_grid example
Then, Edit and Run the code.
Then simply scroll the grid horizontally. The case will reproduce.

[paramvir]

Duplicate columns can't be used in the colModel.

Every column is supposed to have unique dataIndx.

[vijay@spinetechnologies]

Hi Paramvir,

Finally, I found the actual reason for the column overlaps. As per the requirement, My grid has approximately 50-100 columns.
So whenever the grid loads, the columns are in shrink mode like in example 1.

To expand the columns, I call the flex method inside the scroll event. So whenever the user scrolls the grid the next columns are expanded.
But in some cases, when the user scrolls the grid quickly the columns overlap each other. Like example 2.

For a better understanding, kindly refer to the attached file.

[paramvir]

flex and animations are computational intensive operations as they calculate and manipulate DOM.

scroll event fires at a high rate and running such operations in this event is a bad idea!

Please use scrollStop instead of scroll event to call flex and turn off the animations if you can afford without them.

[vijay@spinetechnologies]

Hi Paramvir,

Thanks for your quick response. I tried your proposed solution and it works for me.

Once again thank you