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
close icon

External Drag – Drop scroll to fast up and down

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.


3 Replies 1 reply marked as answer

SA SureshRajan Alagarsamy Syncfusion Team May 22, 2023 04:16 PM UTC

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.



AL Alex replied to SureshRajan Alagarsamy May 29, 2023 07:18 AM UTC

Hi Suresh,


Do you already found a solution for this problem?


Regards,

Alex.



SA SureshRajan Alagarsamy Syncfusion Team June 7, 2023 11:04 AM UTC

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.


Marked as answer
Loader.
Live Chat Icon For mobile
Up arrow icon