Custom HTML Node Dynamic Content

[ceds]

I have a diagram with HTML nodes.  The content of the nodes gets updated with new content dynamically.  Doing this the right way is turning out to be very challenging.

See below for typical content of an HTML node:

The content is generated from a plotting library and then injected into the HTML node.  There are two ways I tried to make it work:

Option 1

Find the HTML element hosting the code and overwrite it with new HTML:

let diagramElementParent = document.getElementById(`${chartInfo.diagramChartId}_content_html_element`);
let diagramElement = diagramElementParent.childNodes[0];
chart.appendToElement(diagramElement); //The chart div is appended to the diagram element

Option 2

Change the property of the node to reflect the new content and then refresh the diagram

let node = this.diagramControl.nodes.filter((x) => x.properties.id == chartInfo.diagramChartId)[0];
let chartHTML = chart.getHTML();
node.properties.shape.properties.content = chartHTML;
this.diagramControl.refresh();

Unfortunately, both options have consequences that break the functionality of the Diagram control.  

Both Option 1 and Option 2 breaks when the node tries to "refresh".  This happens when both nodes are selected:

Option 1 Result

The HTML content gets removed and replaced with the original content which is to be expected.  The original content is blank.

Option 2 Result

The original code is 99% similar.  For some reason the original code gets changed resulting in the above result.

Conclusion

Any assistance on the right way to do this will be appreciated.

[Balasubramanian Manikandan]

We have analyzed your query from our side and suspect that you are attempting to modify the HTML node content at runtime, but you render the template for the HTML node. When you render the template in your diagram, you can modify the template itself, but you cannot change the content. This is the expected behavior of our diagram control. We have provided a sample for your specific requirement. In this sample, we demonstrate how to change the HTML template at runtime, and you don't need to refresh the diagram as it is updated automatically. Please refer to the attached sample below for further details.

Sample

https://stackblitz.com/edit/duuspv-f1auoo?file=index.html

[Sergi Magret]

Hi! We have a similar problem, but in our case we are using the nodeTemplate as a function instead of an HTMLNode, is there any way we can accomplish the same with the function (https://ej2.syncfusion.com/documentation/diagram/shapes#functional-nodetemplate )? The only way we have found is by calling diagram.refresh(), but that updates all the diagram and with complex diagrams that is too expensive.

The ideal would be to call the nodeTemplate function for the modified nodes only. The intended result is that when a connector is selected, highlihght the source and target nodes by changing the fill style property.

[Dhakshin Prasath Dhanraj]

Hi,

 

Yes, we can change the chart properties dynamically which is appended in the HTML node. In the sample below, we have changed the shape of the markers on a button click. You can refer to this sample for reference.

Sample: https://stackblitz.com/edit/duuspv-88hnevy9?file=index.js

Regards,

Dhakshin