How to Save Diagram in a specific server directory?

[vmax]

How to Save and load a Diagram in a specific server directory ?

[Shyam G]

Hi Vmax, 

 

• The save and load in diagram are performed using diagram API’s diagram.save() and diagram.load().
• The Save method returns serialized json object of diagram.
• This json object can further be converted to string in the client side and send it to the server side using AJAX.
• In the server side, you can save the JSON string into the text file or database.
• Later the same string can be retrieved from the stored location and converted back to json object and loaded using Load method.
• if you need to save and load the diagram in the database, please refer to the kb link. Please refer to the code example in which we have saved the JSON string in the text file and retrieved from that file and loaded the diagram.

 

Code example: 

  [WebMethod] 

        public static void save(string JSONstring) 

        { 

              

//get the location 

            var path = Path.Combine(HttpContext.Current.Server.MapPath("~/Images"), "JSON.txt"); 

            //write the jsonstring to text file 

            File.WriteAllText(path, JSONstring); 

        } 

                  [WebMethod] 

        public static string load() 

        { 

 

            var path = Path.Combine(HttpContext.Current.Server.MapPath("~/Images"), "JSON.txt"); 

//read the json string from text file 

            string JSONdata = File.ReadAllText(path); 

            return JSONdata; 

        } 

 

Kblink:https://www.syncfusion.com/kb/3050/how-to-save-and-load-diagram-from-database 

 

Regards, 

Shyam G 

[vmax]

Hi Vmax, 

 

• The save and load in diagram are performed using diagram API’s diagram.save() and diagram.load().
• The Save method returns serialized json object of diagram.
• This json object can further be converted to string in the client side and send it to the server side using AJAX.
• In the server side, you can save the JSON string into the text file or database.
• Later the same string can be retrieved from the stored location and converted back to json object and loaded using Load method.
• if you need to save and load the diagram in the database, please refer to the kb link. Please refer to the code example in which we have saved the JSON string in the text file and retrieved from that file and loaded the diagram.

 

Code example: 

  [WebMethod] 

        public static void save(string JSONstring) 

        { 

              

//get the location 

            var path = Path.Combine(HttpContext.Current.Server.MapPath("~/Images"), "JSON.txt"); 

            //write the jsonstring to text file 

            File.WriteAllText(path, JSONstring); 

        } 

                  [WebMethod] 

        public static string load() 

        { 

 

            var path = Path.Combine(HttpContext.Current.Server.MapPath("~/Images"), "JSON.txt"); 

//read the json string from text file 

            string JSONdata = File.ReadAllText(path); 

            return JSONdata; 

        } 

 

Kblink:https://www.syncfusion.com/kb/3050/how-to-save-and-load-diagram-from-database 

 

Regards, 

Shyam G 

Hello Shyam,

Firstly I want to thank you for you response, your supportive code is very effective, in the other side  there was a repeating during drawing the diagram. attached video and code files.

Regards.

Attachment: ASP.NETDiagramControlDemo8_30_20179_57_01PM_e9f6eae.rar

[Shyam G]

Hi Vmax, 

 

• On analyzing your code example, we found that you have defined node’s name with whitespace” for some palette items. So only the reported issue occurs. we have created a sample with your code in which we have removed whitespace for paletteItems. Could you please check in the below sample?
• By default, we assign the node’s name to the  “id” of an SVG element while rendering the nodes.
• Due to certain restriction of an “id” attribute which we have shown below in the image and link, we suggest you to define a node’s name without “whitespace”.

Link: http://www.w3.org/TR/html5/dom.html#the-id-attribute  

  

Image: http://www.syncfusion.com/downloads/support/directtrac/general/whitespace1585560980.zip  

 

Sample:http://www.syncfusion.com/downloads/support/directtrac/general/ze/vmaxsample2100861978 

 

If you need to display a name for the items in the symbol palette, please use paletteItems label property. Please refer to the code example. 

 

Code example: 

BasicShape node = new BasicShape();
node.Name = name; 

//Set the desired text to the palette shape 

node.PaletteItem.Label = "Multi document"; 

Regards, 

Shyam G 

[vmax]

Hi Shyam G,

There is now changing after eliminate white-spaces, If ScriptManger is not exist item not duplicate, but save/load functions exactly not working. so how can implement a diagram builder like http://asp.syncfusion.com/demos/web/Dashboard/DiagramBuilder.aspx

Regards.

[Shyam G]

Hi Vmax, 

 

In our asp diagram builder sample, we save the diagram JSON in browser local storage. Please refer to the screenshot of browser local storage. Also refer to the below code example of save and load diagram in local storage. 

 

Code example: 

 

   function save() { 

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

            //save the diagram 

            saveData = diagram.save(); 

            localStorage.setItem("saveData", JSON.stringify(saveData)); 

        } 

        function load() { 

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

            var data = localStorage.getItem("saveData"); 

            if (data) { 

                var jsonData = JSON.parse(data); 

                diagram.load(jsonData); 

            } 

        } 

 

Screenshot: 

 

 

Regards, 

Shyam G 

[vmax]

Hi Shyam,

Thank for you assistance. well done.

Regards.

[Shyam G]

Hi Vmax, 

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

Regards, 

Shyam G