Diagram "out of stack space" error

[Shanzida Sharaf]

Hi,

I am working on Diagram for generating status flow. My test case is like following:

{"root": {"Status":[{ "Status": "NEW", "fillColor": "#916DAF" },

{ "Status": "Created", "Category": "NEW" },

{ "Status": "Review", "Category": "Created" },

{ "Status": "Review", "Category": "Submit" },

{ "Name": "Submit", "Category": "Review" }]}}

This is creating error "Out of stack space". Is there any way to solve this issue and consider this case. Which diagram will work for this?

kind regards,

Shanzida

[Shyam G]

Hi Shanzida, 

 

Currently we don’t have bidirectional layout support in our diagram control. We have already logged “Need to provide bidirectional layout support” in our database and it will be implemented in any of our upcoming releases. The feature implementation would also greatly depend on the factors such as product design, code compatibility and complexity. We will update you when this feature has been implemented. 

However you can use diagram’s client side API add method after updating the layout to achieve your requirement. please refer to the code example and JSPlayground link below. 

Code example: 

diagram.add({"name": "cnr1357134069", "sourceNode": "Review", "targetNode": "Submit"}) 

JSPlayground link:http://jsplayground.syncfusion.com/saoqdp4n 

Regards, 

Shyam G  

[Shanzida Sharaf]

Hi Shyam,

Many Thanks for your response. This will help.

I would like to know how I can create one or multiple custom node in that diagram. suppose

 var data = [

                 { "Status": "NEW", "fillColor": "#916DAF" },

    { "Status": "Created", "Category": "NEW" },

{ "Status": "Review", "Category": "Created" },

        { "Status": "Submit", "Category": "Review" },

 { "Status": "Rejected", "Category": "Submit" },

            ];

I want to add new status "Approve" in that diagram in the level "Submit" status but don't want to define in the data variable.  Is it possible? Or is there any format that I can use in the data variable?

Thanks in advance.

regards,

Shanzida

[Shanzida Sharaf]

Hi Shyam,

Please check the attachment that I have tried from jsplayground. 

diagram.add({"name": "node1", "sourceNode": "Created", "targetNode": "T"}) is not working. Could you please help.

kind regards,

Shanzida

Attachment: diagram_ec04771d.7z

[Shyam G]

Hi Shanzida, 

 

You need to set the node’s name to the connector sourceNode and targetNode property to establish the connection between nodes. You have not set a node name, so it generates with a random ID. Now we have set a node’s status property to the node name in the nodeTemplate method to achieve your requirement. Please refer to the modified JSPlayground link. 

 

JSPlayground link:http://jsplayground.syncfusion.com/1z4jw3xr 

 

Regards, 

Shyam G 

[Shanzida Sharaf]

Thanks for your support that is very helpful.

Please check the attached file. How can I stop the connector visible over the node??

There is a node called "Resubmit", can I set the node position e.g. in second level or third level without overriding the nodes.

Thanks in Advance.

kind regards,

Shanzida

Attachment: diagram_51e53911.zip

[Shyam G]

Hi Shanzida,  

 

Please use connectors segments length and direction property to avoid the connector overlap over the node. Please refer to the below help documentation and JSplayground link below. 

 

Help documentation:https://help.syncfusion.com/js/diagram/connector#segments 

 

JSplayground link:http://jsplayground.syncfusion.com/on1rxstl 

 

Regards, 

Shyam G