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

TreeviewComponent scroll enable and drag'n'drop behavior


I've a comportment that i don't understand. I create a treeviewcomponent (dynamically after api call) with text content size fixed. When I want to drag an element into my scheduler after scrolling into my tree component i've not the corresponding element. It seems that is the position of the element in the component without care about the scroll offset.

Have you got a demo with treeviewcomponent with scrollbar enable (=> treeviewcomponent with fixe size) and drag'n'drop behavior

Thank you for your help ! 

5 Replies

KR Keerthana Rajendran Syncfusion Team November 26, 2019 01:02 PM UTC

Dear Customer, 
Greetings from Syncfusion support.  
We have checked your reported query about TreeView scrollbar. We suspect that the below cases are your requirement. 
1.      While drag and drop from TreeView to another component (like listview, scheduler.,) the dragging element is maintained in corresponding TreeView. 
2.      When scroll the TreeView from the end, drag a last element and drop to another TreeView first position, the scroller in that TreeView is maintained in same position. 
For your reference, we have prepared a sample for both the above cases. 
If we have misunderstood your requirement, can you please share the additional details regarding your requirement, it will helpful for us to resolve your issue earlier. 

TF Thierry FRIGOUT November 26, 2019 03:14 PM UTC


It is my fault i'm not very explicit. I have create a treeview component with custom template (a card with multiline label) when i scroll and then inspect the DOM the class for hover event isn't over the correct item like if the scroll offset is not used. It's the same behavior when i try to drag'n'drop.
Have you any advise.
Thank in advance.


KR Keerthana Rajendran Syncfusion Team November 27, 2019 06:36 AM UTC

Dear Customer,  
Good day to you,  
When using custom template in TreeView component, you need to add custom styles for those elements. For your scenario, add custom class for TreeView component then add style as shown below to resolve your hover issue.   
Refer below code block: 
.custom .e-list-item .e-fullrow { 
        height: 104px; 
We have prepared TreeView sample with multiline card template . Refer to the below link. 
Please let us know if you have any concerns. 

TF Thierry FRIGOUT November 29, 2019 09:10 AM UTC

OK it works ! Thank you !

KR Keerthana Rajendran Syncfusion Team December 2, 2019 04:49 AM UTC

Dear Customer,   
Most welcome. We are glad to hear that the provided solution helped you to achieve your requirement. Please get back to us if you need any further assistance on this. 

Live Chat Icon For mobile
Up arrow icon