Drag and Drop on large data sets very slow

Question

Hey,

We are using the Syncfusion scheduler with a large dataset of around 70 plus people with grouping on and in work week view and we need to be able to drag and drop from an external component into the calendar, but we are finding the on item drag mouse hover to be extremely slow and laggy, trailing behind the mouse.

I have replicated this in the below example

https://stackblitz.com/edit/react-n6zvok?file=index.js

Could you please let us know a way around this

Kind Regards

Liam

Ravikumar Venkatesan · Answer

Hi Liam,Greetings from Syncfusion support.We have validated your query “Drag and Drop on
large data sets very slow” at our end. The onItemDrag method in the sample
is the root cause of your reported problem and you can resolve the problem by
doing the below changes.Step 1: Remove the drag event of the
Schedule and nodeDragging event of the TreeView which bind with the onItemDrag
method.Step 2: Use the nodeDragStart event of
the TreeView as shown in the below code snippet and add a highlighted line in
the onTreeDragStop method.[index.js]

export class ExternalDragDrop extends SampleBase {
    onTreeDragStop(event) {
      document.body.classList.remove('e-disble-not-allowed');
    }
   
    onNodeDragStart() {
      document.body.classList.add('e-disble-not-allowed');
    }
   
    render() {
      return (
                <TreeViewComponent ref={(tree) => (this.treeObj = tree)} cssClass="treeview-external-drag" dragArea=".drag-sample-wrapper" nodeTemplate={this.treeTemplate.bind(this)} fields={this.fields}
                  nodeDragStart={this.onNodeDragStart} nodeDragStop={this.onTreeDragStop.bind(this)} allowDragAndDrop={this.allowDragAndDrops} />
      );
    }
  }

API(nodeDragStart): https://ej2.syncfusion.com/react/documentation/api/treeview/#nodedragstartStep 3: Add the below CSS in index.css[index.css]

.e-disble-not-allowed {
      cursor: unset !important;
  }
   
  .e-drag-item.treeview-external-drag .e-icon-expandable {
      display: none;
  }

Sample: https://stackblitz.com/edit/ej2-react-schedule-external-drag-and-drop?file=index.jsKindly try the shared sample and let us know if you
need any further assistance.Regards,Ravikumar Venkatesan