Grid - RowDD.drag error

[Marko Bezjak]

Hello.

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.

Marko

[Thavasianand Sankaranarayanan]

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. 

@Component({ 

  template: ` 

  <div> 

  <ejs-grid id='Grid' [dataSource]='srcData'(rowDrag)='rowDrag($event)'   (rowDrop)='rowDrop($event)' [allowRowDragAndDrop]="true" 

  [rowDropSettings]="srcDropOptions" [selectionSettings]="selectionOptions"> 

            <e-columns> 

                .  .  .  .  .  .  .  . 

                .  .  .  .  .  .  .  . 

            </e-columns> 

  </ejs-grid> 

  </div> 

  <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. 

    @ViewChild('scheduleObj') 

    public scheduleObj: ScheduleComponent; 

    rowDrop(args: any){ 

      this.scheduleObj.addEvent(args.data); 

        args.cancel = false; 

    } 

    rowDrag(args: any) { 

      args.cancel = true; 

    } 

} 

Sample: https://www.syncfusion.com/downloads/support/forum/148182/ze/grids-437857123.zip 

Refer the help documentation. 

 

Link: https://ej2.syncfusion.com/angular/documentation/grid/row/#drag-and-drop 

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

 

Regards, 

Thavasianand S. 

[Marko Bezjak]

Hello,

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. 

B.R.

Marko

Attachment: SF_148182_eed7e4e2.zip