Node template click event and drag rendering

[Nicolas Wild]

Hello

I used :nodeTemplate to add some buttons to the right of the node text (and just visible on selected node via css).

The uttons get no rendered inside <span class="e-list-text">

a) My problem is, that the buttons dont receive the click events, because the parent event is preventing that

b) When dragging the node, also the buttons are shown in the "drag preview" - but I just want to have the text shown here

Is there a solution for that?

[Sowmiya Padmanaban]

Hi Nicolas,  

 

Greetings from Syncfusion support. 

 

Query 1 – nodeTemplate 

 

We have checked your reported problem. To achieve your requirement, we have prepared a sample. In that sample, we have rendered the button inside the nodeTemplate and display the button only on nodeSelect. During nodeSelect “e-active” is added to the selected node. 

 

Refer the below code snippet. 

<style> 

.e-list-text .button { 

  visibility: hidden; 

} 

.e-list-item.e-active > .e-text-content .e-list-text .button { 

  visibility: visible; 

} 

</style> 

 

 

Query 2 – Click event is not triggered for button. 

 

To resolve your issue, refer the below styles in your application for triggering the click events for button inside the Treeview Template. 

.e-treeview .e-list-text { 

  pointer-events: auto; 

} 

 

Query 3 – Drag and Drop issue. 

 

We are unable to reproduce your reported issue. When dragging, button is not displayed in drag node.  

 

Refer the sample link for your reference. 

https://codesandbox.io/s/vue-template-v39ue 

 

Please let us know, if you need any further assistance. 

 

Regards,  

Sowmiya.P 

 

 

[Nicolas Wild]

Thanks a lot! The pointer-events: auto was the missing thing for the click event.

And your css selector also prevents the issue with the drag preview. In my case the button was still visible, but with your selector it gets hidden when the drag starts.

[Sowmiya Padmanaban]

Hi Nicolas,  

  

Thanks for your update. 

  

From your last update. We are unable to predict whether the provided solution meet your exact requirement or not.Please let us know , if you are still facing any issue with more details. We will happy to assist you. 

  

Regards,  

Sowmiya.P 

  

  

[Nicolas Wild]

No, everything fine. As I wrote with your css selector it works! You can close that thread :)

[Sowmiya Padmanaban]

Hi Nicolas,  

  

We are happy to hear that your issue has been resolved. Please contact us if you need any help from us. We will happy to help you. 

  

Regards,  

Sowmiya.P