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

How to Save Diagram in a specific server directory?

Thread ID:

Created:

Updated:

Platform:

Replies:

132383 Aug 29,2017 01:30 PM Sep 5,2017 02:18 AM ASP.NET Web Forms 7
loading
Tags: Diagram
vmax
Asked On August 29, 2017 01:30 PM

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

Shyam G [Syncfusion]
Replied On August 30, 2017 09:23 AM

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; 
        } 
 
 
Regards, 
Shyam G 


vmax
Replied On August 30, 2017 03:37 PM

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; 
        } 
 
 
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 [Syncfusion]
Replied On August 31, 2017 08:54 AM

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”.
  
 
 
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
Replied On August 31, 2017 03:20 PM

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 [Syncfusion]
Replied On September 1, 2017 03:38 AM


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
Replied On September 4, 2017 11:39 AM

Hi Shyam,

Thank for you assistance. well done.

Regards.


Shyam G [Syncfusion]
Replied On September 5, 2017 02:18 AM

Hi Vmax, 
Please let us know if you need further assistance on this. 
Regards, 
Shyam G 


CONFIRMATION

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.

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.

;