External Drag – Drop scroll to fast up and down

[Alex]

Hello,

I try to drag and drop some items from the treeview to the scheduler in the weekview. The only problem is when I move with the item to the top of the scheduler, scroll it superfast to the top that it is impossible to drop the items.

When i drag-and-drop items in the scheduler internal work, everything great with normal speed, the only issue is from external items.

In my opinion, is the problem that the scheduler has his own scrollbar and not the scrollbar from the full window like you can see in the picture below.

So, is there a way to set a scroll speed or another possible way that it not scroll so fast up and down?

Thanks for you help.

[SureshRajan Alagarsamy]

Hi Alex,

We have reviewed your query regarding the fast scrolling issue while dragging the node in the Scheduler component. We were able to reproduce the reported issue on our end. But we need some additional time find the root cause of the issue. We will update further details on or before May 24, 2023.

Regards,
Suresh.

[Alex]

Hi Suresh,

Do you already found a solution for this problem?

Regards,

Alex.

[SureshRajan Alagarsamy]

Hi Alex,

Thanks for the patience.

Upon further validation, Scheduler component follows step dragging functionality but in tree view component follows default auto scrolling functionality.  To control scrolling speed, we can disable the auto scroll functionality in tree view and handle step dragging in application end.

To achieve this, we need to bind the "created" event and set the "enableAutoScroll" property of the TreeView to false. Additionally, we need to bind the "nodeDragging" event and call the "updateScrollPosition" function. Inside the "updateScrollPosition" function, we have added a setInterval function that triggers the "ScrollBoundary" function. In the "ScrollBoundary" function, we identify the mouse pointer position and then trigger the "autoScroll" function. In the "autoScroll" function, we declare an “scrollBy” integer value and check the mouse pointer position. If the mouse pointer is at the top edge, bottom edge, left edge, or right edge, we add the declared integer value to the position, acting as a distance integer.

Please note that you can adjust the “scrollBy” value based on your requirement.

We have attached sample for your further reference.

Sample : https://stackblitz.com/edit/angular-pyn7ca?file=src%2Fapp.component.ts

Check out the shared details and get back to us if you need any further assistance.

Regards,
Suresh.