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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Creating complex node

Thread ID:





146327 Jul 31,2019 01:53 PM UTC Sep 4,2019 06:21 AM UTC Vue 4
Tags: Diagram
Karsten Schulz
Asked On July 31, 2019 01:53 PM UTC

Hi guys,

I really beginner on syncfusion and it provided components. And I try to implement a complex node based on some sub nodes. For better illustrate the node i created a screenshot with your diagrambuilder:

My main problem is the positioning of the elements inside the group. I don't understand exactly the offset behavior of the nodes. Could somebody help me. Maybe providing code snippets for one complex node like i image in that picture?

Shyam G [Syncfusion]
Replied On August 1, 2019 06:49 AM UTC

Hi Karsten, 
By default, the node’s will be positioned based on its offset value. The node’s offset is center of a node. For a group node, you should position the children by its offset. Based on the children bounds, we internally position a group element. If you specify the offset for group element, then all its children gets translated with respect to group offset. This is an default behavior of our diagram control. 
We have created a sample to create a group node and it is available in below link for download. Please refer to a code example 
Code example: 
  data: function() { 
    return { 
      width: "100%", 
      height: "499px",  
      nodes: [ 
        // create node 
    // Grouping nodes into a single group 
        id: 'group',   
        // set an node id to children collection 
        children: ['firstRectangle', 'Image', 'MyNode', 'A', 'B', 'C', 'D'] 
//create node 
 function createNode(id, width, height, offsetX, offsetY, content) { 
   var node = {}; 
   node.id = id; 
   node.width = width; 
   node.height = height; 
   node.offsetX = offsetX; 
   node.offsetY = offsetY; 
   node.annotations = [{content: content}]; 
   return node; 
Help documentation for group node 
Shyam G 

Karsten Schulz
Replied On August 1, 2019 11:05 AM UTC

Hi Shyam,

thanks a lot for your explaination. I implemented it like your snippet and it works perfectly.
Also so connection between both nodes are working.

But for now, i want to add the auto-arrangement between both complex nodes. and i try to add the "HierarchicalTree" but its not working. It seems to be there is no effect.
My nodes and connectors are provided by a vuex store. Is there a possibility to use an exsiting layout, or could i implement an own layout and put it into the diagram?

Shyam G [Syncfusion]
Replied On August 2, 2019 12:12 PM UTC

Hi Karsten, 
Reported Issue : “Layout not populated with group Nodes“ 
We can reproduce the issue. We have confirmed this as a defect. We have logged a defect report for this issue. We will fix this issue and provide the patch on EJ2 patch release 21st August, 2019 
Now, you can track the status of your request through below feedback link. 
Shyam G 

Shyam G [Syncfusion]
Replied On September 4, 2019 06:21 AM UTC

Hi Karsten, 
Sorry for the delay. 
Reported issue : Layout not populated with group Nodes. 
We are glad to announce that our patch release (v17.2.41) is rolled out successfully and In that release, we have added the fix for reported issue.    
Please upgrade to the latest version packages to resolve this issue. 
Shyam G 


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon