We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Grid - RowDD.drag error


I'm trying to implement an external drag-drop from grid component to scheduler component but when I drag an item from Grid over scheduler I get this error: 

as far as I checked your code the drag event function notices that the draggable element is being dragged over TR element and wants to get the ID of grid that doesn't exist.
Please provide me with an solution to this problem.

Thank you in advance.


2 Replies

TS Thavasianand Sankaranarayanan Syncfusion Team October 10, 2019 12:23 PM UTC

Hi Marko, 

Greetings from Syncfusion support. 

Based on your query we have prepared a sample and we suggest you to follow the below way to achieve your requirement. Please find the below code example and sample for more information. 

  template: ` 
  <ejs-grid id='Grid' [dataSource]='srcData'(rowDrag)='rowDrag($event)'   (rowDrop)='rowDrop($event)' [allowRowDragAndDrop]="true" 
  [rowDropSettings]="srcDropOptions" [selectionSettings]="selectionOptions"> 
                .  .  .  .  .  .  .  . 
                .  .  .  .  .  .  .  . 
  <ejs-schedule #scheduleObj  id='Schedule' [selectedDate]='selectedDate' [views]='views' [eventSettings]='eventSettings'></ejs-schedule>` 

export class AppComponent { 
    public srcDropOptions = { targetID: 'Schedule' };   // you have to set the targetID to reach your destination from grid. 
    public scheduleObj: ScheduleComponent; 

    rowDrop(args: any){ 
        args.cancel = false; 

    rowDrag(args: any) { 
      args.cancel = true; 

Refer the help documentation. 

If you still face the same issue then please get back to us with some more detail. 
Thavasianand S. 

MB Marko Bezjak October 17, 2019 10:19 AM UTC


Sorry but your example did not really resolve my problem. In your example the row (item) was moved to scheduler even if you didn't drop it inside of it. What I actually needed was just a simple way to drag the cloned element over any element on the page. I resolved my problem so it's ok now.

However I have another problem with drag and drop.. or it's a problem with grid itself.
When I try to drag items in the grid quickly.. the grid sometimes lags out abit and because of that the dragged item (row) is not actually the item (row) I wanted to move. For example I want to move row 2 to the 8th position. I "mousedown" on "drag-icon" of row 2 and start moving the mouse down to the 8th position.. now somehow the drag event triggers late and the row that I'm dragging is row 3 or row 4 (depends how late the event is I guess) and not row 2. I have made a video where I try to drag row "de" to another position and you can see that the grid totally lagged out and selected a row that was 3 positions up in the direction of my mouse movement. I will attach the video so you can understand the problem better.
Now what I think happens here... you don't trigger dnd event immediately after 'mousedown' event. Which is logical since you are waiting for user to start any movement to prevent unnecessary event triggering. Which leads to grid not selecting the right row to drag because it is selected when event happens.
What I think you should do... whenever the 'mousedown' event is triggered on the drag icon you should immediately say this is the row that will be moved if user makes any movement... so that dnd event already knows which row to move.

I hope you understand what I'm trying to say and provide some solutions. This problem gets even worse with more data in grid or worse computer with less resources. Maybe this is also a grid performance problem when it has lots of templates or something.. idk. 


Attachment: SF_148182_eed7e4e2.zip

Live Chat Icon For mobile
Up arrow icon