How do i manage state in a node

[sunil Kudupudi]

As of now I am using shape html and passing a html string as node shape but I need that node component to be a vuejs component so that I can maintain it's state while it is on diagram area.

[Gowtham Gunashekar]

Hi sunil, 

We have added a sample to demonstrate how to use the Vue component as html template in the html node 

 

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/html_template-1773172729 

 

If we misunderstood your requirement, please share us more details or replicate the issue in the shared sample. This will be helpful for us to proceed further. 

 

Regards,  

Gowtham 

[sunil Kudupudi]

Hi gowtham,

The above reply was helpful, but how do I use it with a symbol palette or node palette to drag and drop the nodes with state management

[Gowtham Gunashekar]

Hi sunil,  

 

We are validating your requirement and update you with more details on 14^th February 2021. 

 

Regards, 

Gowtham 

 

[sunil Kudupudi]

Hi gowtham any updates on this ticket?

[Gowtham Gunashekar]

Hi Sunil, 

Sorry for the delay. 

We don’t have support to render the complex html template in the symbol palette, however we can able to render the simple HTML nodes in the symbol palate. We can achieve your requirement using the drop event. When a node is drag and drop into the diagram, drop event will trigger, in the event we can cancel the existing node and add the complex HTML node using add API. We have prepared a sample to drag and drop the normal HTML node and add the complex HTML node at drop event. We have used calendar component, but you can use any template as per your requirement. 

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/drgaand_dropComplexTemplate937055184 

Video Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/vueapp_-_complextemplate1848582537.zip 

  

Regards, 

Gowtham