Dynamically changing controls from nodeTemplate

[Wil van Antwerpen]

Hi,

The diagram from the Zoom and Pan demo: https://ej2.syncfusion.com/demos/#/material3/diagram/zoom-and-pan.html  has a beautiful organisation chart employed via the setNodeTemplate function.
The setNodeTemplate function does its magic with StackPanels, an ImageElement and some TextElements.
Very nic.

Already figured out that you can dynamically update things like the image behind it by updating the data itself and issuing an refresh to the diagram control itself. That works very well.

However sometimes I want to make a temporary change to the node, say for example changing the border style width and the border color.
You can do that by adjusting the html, however as the nodeTemplate uses javascript objects and controls.. I was wondering if it is also possible to do this by adjusting the javascript properties instead of directly making changes to the html layer.

thanks,
Wil

[Moulidharan Gopalakrishnan]

Hi,

The properties like node border style and border color can be modified at runtime only for the built-in shapes of the diagram. However, since you are using setNodeTemplate, the template is appended to the node, and as a result, the template styles cannot be modified through diagram object properties. If you want to temporarily change the node's properties, adjusting the HTML element by accessing it directly from the DOM is the only possible approach.

Could you please provide additional details about what you are trying to achieve with the setNodeTemplate? This will help us assist you better.

 

Regards,

Moulidharan G 

[Wil van Antwerpen]

Hello Moulidharan,

OK, I had expected that the javascript objects were still accessible, but I understand from your reply that this is not the case. I was just looking for the best approach to be able to set things like border style, color, opacity etcetera of the individual html elements in the node, after the node is already rendered. If we have to do this directly in html then that's the way to go forward.

The setNodeTemplate is used for making an organisation chart, just like in the example. Sometimes however there's a need to make adjustments. For example when dragging a new node from a non syncfusion control onto the organisation chart. But that's just one example, there are other needs to customize.

Thanks for your reply,
--
Wil

[Moulidharan Gopalakrishnan]

Hi,

As mentioned previously, template properties cannot be directly modified at runtime through the diagram's properties, as there are no direct APIs available for this. The only feasible approach is to access the required element from the DOM (e.g., the selected node), retrieve the template elements appended to the node, and apply the desired changes manually.

We have prepared a simple sample demonstrating how to change the border color of a node using this approach. Please refer to the sample for reference.

Sample: Ojuqkv (forked) - StackBlitz

Regards,
Moulidharan

[Wil van Antwerpen]

Hello Moulidharan,

Great looking example.
That does exactly what I need.

Thank you.

--
Wil

[Moulidharan Gopalakrishnan]

Hi,

 

Thanks for your update. Please feel free to reach out if you need further assistance, we're always happy to help!

 

 

Regards,

Moulidharan