Poor performance on row drag & drop

[ChaseRLewis73003Participant]

We have a developer who followed the example here.
https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/dragdropgridrecordtoform.htm?classic
To implement row drag & drop. We use that with a hit test in jqxTree to drop rows to different tree elements and move files to different folders in a web view.

It came to our attention recently that repeated navigation degrades performance of the grid significantly. We start at ~80-90ms round trip within our firewall to upgrade a page with ~100 rows to after about 10-20 navigations taking about 1.6-2 seconds. Sometimes while going up it drops down a couple hundred ms then starts rising again. After profiling it I have found the result is the offending code below which is the only function called on ‘render’ within the jqxGrid definition. Uncommenting this call results in a stable ~80-90ms performance but naturally disables our drag & drop. Our navigation between folders sets the jqxDataAdapter to a new url and calls ‘updatebounddata’, since it works stably without this code, and the performance degrades even if a drag & drop event never fires. This means it has something to do with simply initializing it as such on render within jqxGrid repeatedly. However, jqxDragAndDrop doesn’t appear to have any cleanup methods from looking at the API so I’m unsure how to proceed as there appears to be a problem with this recommended practice if you often update the data in the grid and I don’t see any available methods to assist this issue.

 function setupReportsGridDragAndDrop() {

        let reportsGrid = $('#jqxgrid');
        let folderTree = $('#jqxTree');
        let gridCells = reportsGrid.find("div#contenttablejqxgrid div.jqx-grid-cell");
        let dropTarget = folderTree.find("li.jqx-tree-item-li > div");

        gridCells.jqxDragDrop({
            appendTo: 'body',
            dragZIndex: 99999,
            dropAction: 'none',
            initFeedback: function(feedback) {
                feedback.height(40);
                feedback.width(75);
            },
            dropTarget: dropTarget,
            revert: true
        });

        gridCells.css("cursor", "pointer");
        
        gridCells.off('dropTargetEnter').on('dropTargetEnter', function(event) {
            //console.log("dropTargetEnter");
            
            gridCells.jqxDragDrop({ revert: false });

            // remove highlight from all folders when not hovering over a drop target
            folderTree.find("div.folder-drop-hover").removeClass("folder-drop-hover");

            // highlight folder when hovering over drop target
            $(event.args.target).addClass("folder-drop-hover");
        });

        gridCells.off('dropTargetLeave').on('dropTargetLeave', function(event) {
            //console.log("dropTargetLeave");

            gridCells.jqxDragDrop({ revert: true });

            // remove highlight from all folders when not hovering over a drop target
            folderTree.find("div.folder-drop-hover").removeClass("folder-drop-hover");
        });
        
        gridCells.off('dragStart').on('dragStart', function(event) {
            //console.log("dragStart");

            let target = $(event.target);

            if (target.hasClass("jqx-grid-cleared-cell")) {
                gridCells.jqxDragDrop({ revert: true });
                return;
            }

            reportsGrid.jqxGrid('clearselection');
            
            let cell = reportsGrid.jqxGrid('getcellatposition', event.args.pageX, event.args.pageY);
            let rowdata = reportsGrid.jqxGrid('getrowdata', cell.row);
            target.jqxDragDrop('data', { ReportId: rowdata.ReportId });
            
  

let feedbackHtml = ‘
<div style=”text-align:center; cursor: move”>
<div class=”fa fa-file”></div>
<div>${rowdata.Description.substring(0, 10)}</div>
</div>`;

let feedback = target.jqxDragDrop(“feedback”);
feedback.html(feedbackHtml);
});

gridCells.off(‘dragEnd’).on(‘dragEnd’, (event) => {
//console.log(“dragEnd”);

let folderTreeItem = folderTree.jqxTree(“hitTest”, event.args.pageX, event.args.pageY);
if (folderTreeItem) {
gridCells.jqxDragDrop({ revert: false });
let target = $(event.target);
let data = target.jqxDragDrop(‘data’);
let reports: string[] = [data.ReportId];
let folderId = folderTreeItem.id;
moveReport(reports, folderId, true);
} else {
gridCells.jqxDragDrop({ revert: true });
}

// remove highlight from all folders when not hovering over a drop target
folderTree.find(“div.folder-drop-hover”).removeClass(“folder-drop-hover”);
});
}`

[HristoParticipant]

Hello ChaseRLewis73003,

You code looks fine.
Could you provide us simple example with whole code for better analyzing?

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[ChaseRLewis73003Participant]

Hey Hristo, I’ll whip up something but might be a couple days before I can get it to you as while it is desired to have it fixed I have a couple higher priority items with the company at the second. Hopefully get it to you before the end of the week.

[Author]

Posts