We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Many text nodes of diagramComponent are not rendering

Hello Syncfusion Team,

I'm using the following version of DiagramComponent: "@syncfusion/ej2-angular-diagrams": "^17.3.34", 

I'm encountering an issue where many of my text nodes are not rendering at all when I reload the diagram component from JSON.

The original diagram actually looks like this (notice the many text nodes): https://i.imgur.com/kOD3MSC.png

I have prepared a stackblitz demo (notice that quite a few of the text nodes are not rendering even though they are actually present in the json): https://stackblitz.com/edit/diagram-textnode-not-rendering

Any help would be appreciated. 


10 Replies

SG Shyam G Syncfusion Team December 17, 2019 06:55 AM UTC

Hi Mithun, 

By analyzing your JSON, the text node has a parentId value which means you have rendered it as a group node but the group node is not present in your JSON. So only the text node is not loaded in the diagram. We have removed the parentId value in your JSON to resolve your issue. Also, please share us more details such as how you have created a group node with text node and saved in the diagram with code example or modify the below sample. 

Shyam G 

MI Mithun December 17, 2019 11:47 AM UTC

Thanks Shyam, that explains it. 

Even I'm not sure how the grouped node got removed since our app's users can only perform the standard operations as allowed by the DiagramCompoment (group/ungroup, cut/copy/paste, undo/redo, format style/shape etc). 

I would have assumed that deleting a parent group node would have deleted the child nodes as well, right? 

Would be awesome if the DiagramComponent's loadDiagram() method validated the JSON and flagged issues during loading itself.

In any event, I'll add some additional logging in our app and will revert back if I can repro it manually. 


update: I looked through our app's code. All the grouping/ungrouping is done solely via the diagramComponent's built-in context menu. We don't have any code of our own to group/ungroup nodes.

SG Shyam G Syncfusion Team December 18, 2019 06:13 AM UTC

Hi Mithun, 

We have created a sample in which we have set a node parentId value as empty whenever the group node is not present in the JSON. Please refer to a code example and sample below. 

Code example: 
 checkParentNode(diagramContent) { 
    let JSONString = JSON.stringify(diagramContent); 
    //parse JSON string 
    let parseData = JSON.parse(JSONString); 
    //Iterate a nodes 
    for (var i = 0; i < parseData.nodes.length; i++) { 
      //get a node 
      let node = parseData.nodes[i]; 
      //check parentid 
      if (node.parentId) { 
        let nodeData = this.diagramControl.getObject(node.parentId); 
        if (!nodeData) { 
          node.parentId = ''; 
    return parseData; 

Shyam G 

MI Mithun December 23, 2019 01:23 PM UTC

Hi Shyam,

Managed to get a repro (although it is not 100% reproducible always). 

The issue happens when we try to change z-index of a grouped node (we encounter a DOMException and this might be messing up the node's parentId). 

Please see attached video recording (GIF file) + DOMException logs (from browser console). 

I used Syncfusion's showcase demo app to reproduce the issue.

Please let me know if any additional details are needed.


Attachment: repro_367369b5.zip

SG Shyam G Syncfusion Team December 24, 2019 10:58 AM UTC

Hi Mithun, 
We are able to replicate an issue at our end. We will validate and provide you with more details on 30th December, 2019. 
Shyam G 

AR Aravind Ravi Syncfusion Team December 30, 2019 01:12 PM UTC

Hi Mithun,  
Reported Issue : Exception occurs while change zindex for group node at run time  
We have confirmed this as a defect. We have logged a defect report for this issue. We will fix this issue and the patch will be available on 14th January, 2020.  
Now, you can track the status of your request through below feedback link.   
Aravind Ravi 

SG Shyam G Syncfusion Team January 14, 2020 04:33 PM UTC

Hi Mithun, 
Reported Issue : Exception occurs while change zindex for group node at run time. 
We have fixed the reported issue and included it in our patch release (v17.4.43) which is rolled out successfully.  
Please upgrade to the latest version packages to resolve this issue.        
Shyam G 

MI Mithun January 15, 2020 10:58 AM UTC

Hi Shyam,

I'm still seeing the DOMExpcetion even after upgrading to latest 17.4.43. 

Repro steps:
1. Drag any two basic shape nodes onto diagram.
2. Group them together using context menu
3. Select group -> order -> Send to back

This exception will show up in the browser console. Please see attached log.


Attachment: localhost1579085050677_fe9b7b3d.zip

NG Naganathan Ganesh Babu Syncfusion Team January 17, 2020 12:35 PM UTC

Hi Mithun, 
Online samples browsers and diagram builder will not refresh in the weekly patch release. We will refresh those samples and diagram builder in Main/SP release alone. So, we will refresh the samples in our 2019 volume 4 SP1 release and which will be available on end of January 2020.  
Naganathan K G 

AR Aravind Ravi Syncfusion Team February 14, 2020 01:18 PM UTC

Hi Mithun, 
We are glad to announce that our Essential Studio Volume 4, 2019 service-pack-release(v17-4-0-46) is rolled out and is available for download under the following link. 
We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance. 
Aravind Ravi 

Live Chat Icon For mobile
Up arrow icon