1. Home
  2. Forum
  3. Angular - EJ 2
  4. Autoscroll when dragging tree nodes

Autoscroll when dragging tree nodes

Hi,

I have a requirement where when dragging a treeview node from the bottom of the list to put on the top, I want it to auto scroll up the container to reach the items in the top of the list that's hidden by the overlay.


Attached below is a screenshot to give an idea on the requirement, I want the list to scroll automatically to the top when dragging the highlighted node to the top. Ideally it should happen vice-versa as well, for when dragging a node from the top to the bottom.





Thank you.


3 Replies
SA SureshRajan Alagarsamy Syncfusion Team May 17, 2023 04:17 PM UTC

Hi Savindu,


Greetings from Syncfusion support.


We have carefully reviewed your query regarding the drag and drop functionality in the TreeView component. We understand your concern and have prepared a sample that addresses your specific requirement. In this sample, when you drag a node upwards, it will automatically scroll upwards, and when you drag a node downwards, it will scroll downwards accordingly.


To assist you better, We have attached sample for your reference.


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


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


Regards,
Suresh.


SJ Savindu Jayasinghe June 5, 2023 06:31 AM UTC

Hi Suresh,

Sorry for the delayed reply, I have tried out the the changes mentioned in the sample but was unable to get it working as intended, will you be able to highlight exactly what code from the sample I will need to apply to get auto scroll working for drag and drop. Because currently its a bit unclear for me as to what lines of code is needed to do this.

Thanks,
Savindu


SA SureshRajan Alagarsamy Syncfusion Team June 7, 2023 03:47 PM UTC

Hi Savindu,


We have reviewed your query and understand that you are still facing an issue with the auto-scroll functionality in the TreeView component. We would like to inform you that there are no specific code changes required in our previously shared sample to achieve the auto scroll up and down in the TreeView component. However, one thing to note is that you need to set the "allowDragAndDrop" property to true.


Additionally, we recommend upgrading the Syncfusion package to the latest version and checking if the reported issue still occurs.


We have attached a sample for your further reference. We suggest you double-check the sample.


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


Furthermore, we have attached video footage for your reference.


If the issue persists on your end, we recommend you provide the following details:

  1. Share the complete TreeView code snippet details.
  2. Share the version of the Syncfusion package that you are using.
  3. Replicate the issue in our shared sample itself.


These details will help us validate your query further and provide you with a prompt solution.


Regards,
Suresh.


Loader.
Up arrow icon