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

How to Save Diagram in a specific server directory?

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

7 Replies

SG Shyam G Syncfusion Team August 30, 2017 01:23 PM UTC

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 



VM vmax replied to Shyam G August 30, 2017 07:37 PM UTC

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


SG Shyam G Syncfusion Team August 31, 2017 12:54 PM UTC

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 



VM vmax August 31, 2017 07:20 PM UTC

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.




SG Shyam G Syncfusion Team September 1, 2017 07:38 AM UTC


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 



VM vmax September 4, 2017 03:39 PM UTC

Hi Shyam,

Thank for you assistance. well done.

Regards.



SG Shyam G Syncfusion Team September 5, 2017 06:18 AM UTC

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


Loader.
Live Chat Icon For mobile
Up arrow icon