TreeviewComponent scroll enable and drag'n'drop behavior

[Thierry FRIGOUT]

Hi,

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 ! 

[Keerthana Rajendran]

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. 

 

Sample link: https://stackblitz.com/edit/react-uixcum?file=index.js 

 

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. 

 

Regards, 

Keerthana. 

[Thierry FRIGOUT]

Hi,

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.

Regards,

[Keerthana Rajendran]

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. 

  

Sample link: https://stackblitz.com/edit/react-uixcum-x1w8vq 

  

Please let us know if you have any concerns. 

  

Regards, 

Keerthana. 

[Thierry FRIGOUT]

OK it works ! Thank you !

[Keerthana Rajendran]

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. 

 

 

Regards, 

Keerthana.