Html type node is not updated at runtime

[Alex B]

Hello Syncfusion.

In the Diagram, I have different node types. Some of them are native, another HTML one. 

All my nodes have addInfo property, which stores entity data.

In getNodeDefaults method, I detect depending on node type, generate html for the node or not.

node.shape = { type: 'HTML', content: this.getHtmlContent(node) }

#####

  getHtmlContent(node: NodeModel) {

    // @ts-ignore

    let annotation = node.annotations[0].content;

    // @ts-ignore

    let style = node.style.fill;

    // @ts-ignore

    let textColor = node.annotations[0].style.color;

    this.setNodeIcon(node)

    let htmlContent = `<div style="background:${style};display:flex;height:100%;width:100%;">

                        <div style="width:90%;height:100%;display:table;"> 

                          <p style="padding-left:2em;text-align:center;color:white;vertical-align: middle;display: table-cell;">${annotation}</p>

                        </div>

                        <div style="display: table; height: 100%;">

                          <i class="${this.nodeIcon}" aria-hidden style="color: ${textColor}; height: 100%; vertical-align: middle; display: table-cell;">

                          </i>

                        </div>

                       </div>`

    return htmlContent;

  }

After api/Edit call executed, on callback I update addInfo property for the selected node, and it's own annotation.

    async editNode(data) {        

        //Method to add labels at run time

        if(this.currentNodeId !== undefined){

            // @ts-ignore

            let index = this.diagramInstance.nodes.map(e => e.id).indexOf(this.currentNodeId);

            // @ts-ignore

            this.diagramInstance.nodes[index].annotations[0].content = data.title;

            // @ts-ignore

            this.diagramInstance.nodes[index].addInfo.customData.tasktemplate = data;

            // @ts-ignore

            this.diagramInstance.dataBind();

        }

    }

Annotations in diagramInstance nodes array are updated, but HTML content is not updated. Only after I reload diagram, HTML nodes get actual data.

[Aravind Ravi]

Hi Alex, 

On analyzing the provided code snippet, you have tried to change the HTML appearance of node. By default, in the diagram onPropertyChange applies for only diagram properties. So when we tried to change the diagram properties means changed value  only gets updated for the diagram properties not updated in the HTML content and in the sample private properties. We do not have support to two way binding and onPropertyChanged for the private properties in the diagram. 

However, when changing the node annotations and style of the node reset the HTML node content. Please refer below code snippet 

var diagram = this.$refs.diagram.ej2Instances; 

           diagram.nodes[0].annotations[0].content = "Changed"; 

           diagram.nodes[0].annotations[0].style.color = "red"; 

           diagram.nodes[0].style.fill = "black"; 

            diagram.nodes[0].shape.content = getHtmlContent(diagram.nodes[0]); 

            diagram.dataBind(); 

We have attached a sample for your reference. Please find the sample in below link 

Sample: https://www.syncfusion.com/downloads/support/forum/156147/ze/HTML-Node1046851545 

Regards 

Aravind Ravi 

[Alex B]

Hi Aravind.

Changing content property helped me, thanks a lot.

[Aravind Ravi]

Hi Alex, 

Thanks for the update. 

Regards 

Aravind Ravi