Saving diagrams in MongoDB

[yasmine]

Hi,

I'm building a M.E.A.N app and i need to save my hierarchicallayouts and swimlanes in MongoDB and i can't figure out how to do that.,

So If it's possible, how can i do that? 

Thank You

[Shyam G]

Hi Yasmine, 

 

Please use diagram’s save method which helps to serialize the Diagram as JSON. This JSON data can be converted to string and stored for future use. Please refer to the code example and help documentation. 

 

Code example: 

var diagram = $("#ejControl_0").ejDiagram("instance"); 

        //get the serialized JSON 

        var savedDiagram = diagram.save(); 

        //stringify the serialized JSON 

        var string = JSON.stringify(savedDiagram); 

 

Help documentation:https://help.syncfusion.com/api/js/ejdiagram#methods:save 

 

Regards, 

Shyam G 

[yasmine]

Hi,     I m new to all this so i find it hard to get it to work, so if i may get a demo or something more clear on how implement that in my code correctly and to serialize the Diagram.I would really appreciate your help..     Thank you, 

[Shyam G]

Hi Yasmine, 

 

We have created an Angular 2 layout sample in which we have shown how to get the JSON string from the save method. Now you can connect Angular 2 with MongoDB and save that string into the database. 

 

Sample:http://www.syncfusion.com/downloads/support/directtrac/general/7z/angular2579954796 

 

Please look into the below link to create a MEAN app. 

 

Link:https://scotch.io/tutorials/setting-up-a-mean-stack-single-page-application 

 

Regards, 

Shyam G 

[yasmine]

Thank You So Much!

[Shyam G]

Hi Yasmine, 

please let us know if you need further assistance on this. 

Regards, 

Shyam G 

[AliCharper]

Hi Yasmine, 

please let us know if you need further assistance on this. 

Regards, 

Shyam G 

May I know is there any possibility to have events on Digram?. I need to fire an event once client create a new Node for example. Then I can send the change to my backend service.

Regards

Ali

[Shyam G]

Hi Ali, 

 

Please use nodeCollectionChange event to achieve your requirement. Please refer to the code example below. 

 

Code example: 

<ej-diagram id="diagramCore" (nodeCollectionChange)="nodecollectionchange($event)"> 

            </ej-diagram> 

 

nodecollectionchange(e) { 

        alert("nodecollectionchange event triggered"); 

    } 

 

Regards, 

Shyam G