Calling diagram.add with a parameter of type HtmlElement generates an exception

[Joilson Rabelo]

 Hello,

We are trying to add some html to diagram.add method and it is only accepting string html as a parameter, any atempt to call diagram.add method with HtmlElement generates an exception, there is any way to prevent this behaviour?

node: {

id,

shape: { type: "HTML", content: htmlHandler.getHTMLString() },

...

exception ocurrs at diagram.add if we change getHTMLString to getHtmlElement() which returns a HTMLElement instead of string

this.diagram.add(node);

[Naganathan Ganesh Babu]

Hi Joilson, 

 

We suggest you to use diagram’s nodeTemplate property and add the node at runtime using created event. Please refer to the below code example and sample. 

 

Code example: 

                <ng-template #nodeTemplate let-data > 

                    <ng-container *ngIf="data.id == 'node1_template'"> 

                        <div class="diagram_border_cus diagram_border_cal"> 

                        <ejs-daterangepicker #dateRangePicker format='MM/dd/yyyy' ></ejs-daterangepicker> 

                        </div> 

                        </ng-container> 

                    <ng-container *ngIf="data.id == 'node2_template'"> 

                      <div style="height:100%;width:100%;background:whitesmoke"> 

                      <input type="button" value="Hello" >     

                          </div>        

                    </ng-container> 

                </ng-template> 

 

   public nodes: NodeModel[] = [ 

        { 

            id: 'node1_template', offsetX: 409, offsetY: -151, width: 250, height: 30, 

            shape: { type: "HTML" }, constraints: NodeConstraints.Default & ~NodeConstraints.Resize & ~NodeConstraints.Rotate 

        }  

    ]; 

public created(): void {  

        this.diagram.fitToPage(); 

        this.diagram.add(  { 

            id: 'node2_template', offsetX: 150, offsetY: -150, width: 250, height: 30, 

            shape: { type: "HTML" }, constraints: NodeConstraints.Default & ~NodeConstraints.Resize & ~NodeConstraints.Rotate 

        }  ) ; 

    } 

 

 

Sample : https://stackblitz.com/edit/angular-25o25o-9bbrox  

 

Regards, 

 

Naganathan K G 

1

[Fernando Costa]

Just, reforcing, the error occurs by calling the cloneNode method of element, that exists on the passed element, but not where is called.

[Gowtham Gunashekar]

Hi Joilson, 

 

Sorry for the inconvenience caused. On the further analysis of the shared detail, we want to let you know that we can set the HTML to the node in two ways, we can set the HTML element as the string, or we can use the ng-template to set template to the node. We found you have set the “htmlHandler.getHTMLString()” as template content for the HTML node. We suggest you ensure the “htmlHandler.getHTMLString()” returns a valid HTML string. We have added documentation for your references.  

Documentation for the HTML string: https://ej2.syncfusion.com/angular/documentation/diagram/shapes/#html 

Documentation for the HTML Template : https://ej2.syncfusion.com/angular/documentation/diagram/shapes/#html-node-with-template 

Sample for HTML template Node: https://stackblitz.com/edit/angular-doncsv 

 

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