Diagram Save - not a function

[Costi]

Hi, 

I downloaded the trial version of your product for ASP MVC in order to try it and if everything is working as expected to buy it. My interest is mainly the diagram control.

Unfortunately I couldn’t make it work since diagram.save() method is not defined.

Attached is the debugger, the load method is available but the save one is not.

Can you please advice?

 

Also, do you have a ASP MVC custom model binder (IModelBinder) for diagram control ?

 

Thanks,

Costi Gheorghita

Attachment: DiagramSaveIssue_68f0f9c8.zip

[Costi]

Hi,

I was able to make the save function to work.
What I didn't manage to accomplish is to post the diagram or the Json result from save function.
I need to be able to edit the diagram in browser and post the data to server so I can save the structure in my database. (ASP MVC). And also create the diagram back from database.
Maybe I am missing something, but in all samples and documentation I didn't find anything regarding sending back the data on server.
Can you point me what are my alternatives to send the diagram on server so I can save it to database. Is there any ASP MVC custom model binder (IModelBinder) for diagram control?

Your diagram control is really cool, but without a custom Model Binder or some alternatives is useless to my needs.
Looking forward to your solution,
Thanks,
Costi
   

[Shyam G]

Hi Costi

Thanks for using Syncfusion products.

We are glad to inform you that we have created a sample of save and load in database. The save and load in database are performed using  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 and stored in database. Later the same string can be converted back to json object and loaded using Load method. Could you please check whether your requirement satisfies in the below sample and get back to us if you have any other further assistance. please see the code snippet below.

Code snippet:

function save() {

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

        var saving = diagram.save();

        var Jsonsave = JSON.stringify(saving);

        $.ajax({

            url: "/Diagram/save",

            type: "Post",

            dataType: "json",

            data: { "Jsonstring": Jsonsave },

        });

    }

[HttpPost]

        public ActionResult save(string Jsonstring)

        {

         //do your code here

            return null;

        }

    function load() {

        $.ajax({

            url: "/Diagram/load",

            type: "Post",

            success: function (jsonstring) {

                var diagram = null;

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

                var jsonload= JSON.parse(jsonstring);

                diagram.load(jsonload);

            },

        });

    }

[HttpPost]

        public ActionResult load()

        {

           //retrieve json string from database

            return Content(jsonstring);

        }

Sample:https://www.syncfusion.com/downloads/support/directtrac/118086/savemvc-1157027781.zip

Please let me know if any concerns.

Regards,

Shyam G

[Costi]

Hi,

Thank you for your answer.
I managed to complete this part, but I need a way to deserialize the json string as a object (DiagramProperties).
Something like:
  public ActionResult Save(string jsonData)
        {         
            var jToken = JObject.Parse(jsonData);
            var diagramProperties = new JsonSerializer().Deserialize<DiagramProperties>(jToken.CreateReader());
            return new EmptyResult();
        }
Using JsonSerializer is throwing error on casting null to Int:
"Error converting value {null} to type 'System.Int32'. Path 'pageSettings.pageWidth', "
If set the pageWidth in DiagramFeatures() method, this will throw exception on the next cast.

My need is to get on post the DiagramProperties object via a custom model binder, or with ajax posting the json string to be able to deserialize as a DiagramProperties or Diagram.
I need to work with this object, not just store the string in my database.

Thank you for your prompt answer,
Costi





Attachment: Screens_211fcb26.zip

[Shyam G]

Hi Costi

Thanks for the update.

We are able to reproduce the reported issue at our end from the code snippet provided by you and we have logged “Issue in  deserializing the Json string using Newtonsoft” as a defect and created a new incident 134831 on behalf of you related to this forum. We suggest you to follow up the incident for further reference using your direct trac account. However, we have created a workaround sample in order to resolve your reported issue. Please see the code snippet below.

Code snippet:

function save() {

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

        var savediagram = diagram.save();

        if (savediagram.pageSettings.pageWidth == null || savediagram.pageSettings.pageHeight == null) {

            savediagram.pageSettings.pageWidth = 0;

            savediagram.pageSettings.pageHeight = 0;

        }

        if (savediagram.pageSettings.scrollLimit === "diagram" || savediagram.pageSettings.scrollLimit === "infinity")

            savediagram.pageSettings.scrollableArea = {};

        var jsondata = JSON.stringify(savediagram);

        $.ajax({

            url: "/Diagram/save",

            type: "Post",

            dataType: "json",

            data: { "jsonstring": jsondata },

            success: function (jsondata) {

                alert("Success");

                return true;

            },

        });

    }

[HttpPost]

        public ActionResult save(string jsonstring)

        {

            var jToken = JObject.Parse(jsonstring);

            var diagramProperties = new JsonSerializer().Deserialize<DiagramProperties>(jToken.CreateReader());

            return null;

        }

Sample:https://www.syncfusion.com/downloads/support/directtrac/118086/deserializejson35927519.zip

Please let me know if any concerns.

Regards,

Shyam G

[Ryan Obbink]

Hey Shyam,

Quick question? In this thread, I am facing the same issue.  I have pulled down the mvc solution examples.  The thing I am fighting with is I don't get the intellisense needed in diagramfeatures.cshtml to find out where the diagram .save javascript is located.  Can you lend me a hand in telling me where I can locate the save function in javascript, so that I may include it.

Much Thanks.

-Ryan

[Shyam G]

Hi Ryan

Thanks for your update.

Please note that the diagram’s save is an client side API method defined in the ej.web.all.min.js file and you need not specify it in the Application level. If you need to access the diagram’s API, then you need to get the diagram instance and can access the diagram API methods and properties. Please refer the code snippet below.

Code snippet:
<script type="text/javascript">
function save() {
//To get the diagram instance
var diagram = $("#DiagramContent").ejDiagram("instance");
// define save API
var savediagram = diagram.save();
}
</script>

All our diagram API are defined in the ej.web.all.min.js file. Please refer the below link which represents the class API reference of our diagram .

Link: https://help.syncfusion.com/UG/JS_CR/ejDiagram.html#Methods

Please let me know if any concerns.

Regards,
Shyam G

[Senthil Kumar M]

Hi Ryan,

Thanks for your update.

We have forwarded your requirement to our development team and will get back to you with our development team response in one business day 13^th May 2015.

Please let us know if any concern.

Regards,

Senthilkumar M

[Shyam G]

Hi Ryan

Thanks for your patience.

We are glad to let you know that we have created a simple sample in which we have sent the JSON string from the client to the server side via AJAX post. In the server side, we have deserialized JSON string into the dictionary object. Now you can identify each properties as a key, value pair in the dictionary. Please refer the code snippet and sample below.

Code snippet:

<div>

<input type="button" value="save" onclick="save()">
</div>

function save() {

var diagram = null;

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

var save = diagram.save();

var diagramstring = JSON.stringify(save);

$.ajax({

url: "/Diagram/save",

type: "Post",

dataType: "json",

data: { "Jsonstring": diagramstring },

success: function (diagramstring) {

alert("Success");

return true;

},

});
}

[HttpPost]

public ActionResult save(string Jsonstring)

{

var serializer = new JavaScriptSerializer();

//get Json string as a dictionary object

Dictionary<string,object> dict = serializer.Deserialize<Dictionary<string, object>>(Jsonstring);

//to get a model width

string width = (string)dict["width"];

return null;
}

Sample:https://www.syncfusion.com/downloads/support/forum/118086/deserializeobject843028752.zip

Please let me know if any concerns.

Regards,
Shyam G

[syntax]

Hi,

I think my question applies to this thread as well since the issue is very similar:

Using the Diagram Builder (MVC) as a starting point I save the Json data to the database and all is good. Where I struggle is how to retirve the same diagram and load. So if we go by your Diagram builder example as well as the code in this thread, here is the code for retrieving the data:

var jToken = JObject.Parse(tableName.JsonString);
ViewData["DiagramModel"] = new JsonSerializer().Deserialize<DiagramProperties>(jToken.CreateReader());

However, this throws an error:

Cannot deserialize the current JSON object (e.g. {"name":"value"}) into type 'Syncfusion.JavaScript.DataVisualization.Models.Margin' because the type requires a JSON string value to deserialize correctly.

To fix this error either change the JSON to a JSON string value or change the deserialized type so that it is a normal .NET type (e.g. not a primitive type like integer, not a collection type like an array or List<T>) that can be deserialized from a JSON object. JsonObjectAttribute can also be added to the type to force it to deserialize from a JSON object.

Path 'tooltip.margin.left', line 1, position 68176.

Do you have any solutions where we can recover and display a diagram in diagram builder form Json String?

My Second question is hwo do you start the builder with a blank document? I know I can do this on load through jQuery but I was wondering if there is a proper way.

Thank you for your help and your awesome tools.

[Shyam G]

Hi TJ Gokcen, 

 

Query	Response
Do you have any solutions where we can recover and display a diagram in diagram builder form Json String?	Please use DiagramProperties ParseModel method in the server side which converts JSON string into the model object. Please refer to the code example below.    Code example:    [HttpPost]          public ActionResult load()          {              DiagramProperties data1 = new DiagramProperties();              //parse the JSON string              data1.ParseModel(Jsonstring);      }
My Second question is how do you start the builder with a blank document? I know I can do this on load through jQuery but I was wondering if there is a proper way.	Could you please confirm us whether you need to render the diagram builder with empty diagram initially(without flowchart). If yes, please refer to the code example below to render the empty diagram.    Code example:  Controller.cs file     DiagramProperties model = new DiagramProperties();  model.Width = "100%";  model.Height = "100%";  ViewData["DiagramModel"] =model;    Index.cshtml file    @Html.EJ().Diagram("DiagramContent", ViewData["DiagramModel"] as Syncfusion.JavaScript.DataVisualization.Models.DiagramProperties)

 

 

Regards, 

Shyam G 

[syntax]

Thank you, it was what I needed - kind of. It did not render the diagram on retrieval and on an empty canvas, it did not render anything, but it put me in the right direction.

Here is how to get this problem solved if anyone is interested. I go by the example code you guys have.

On Diagram Builder Initialization, get rid of the diagram building code but leave everything else in tact. That takes care of the empty canvas problem.

For retireval, pass JsonString to Diagram Builder Initialization. From there on, it is a simple check:

if(string.IsNullOrWhiteSpace(JsonString ) == false)

                _model.ParseModel(JsonString );

Then you can still use;

ViewData["DiagramModel"] = diagramModel.Model;

Hope this helps.

[Shyam G]

Hi TJ Gokcen,  

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

Regards. 

Shyam G