Diagram - Decision Tree - Save

[Prasanth]

Hi there,

I am trying to create a page where diagram can be used to create decision tree with basic shapes and connectors.  I am able to create sample page where I can create shapes and connectors.  

Is it possible to save decision tree in a database.  Basically I am trying to save the decision tree objects (i.e shapes with parent shapes etc) in table(s).  With the HttpPost ActionResult method is it possible to retrieve the shapes drawn and connectors?

Regards

Prasanthan

[Shyam G]

Hi Prasanthan,

We have created a simple sample to achieve your requirement. please refer to the sample below.

Sample:http://www.syncfusion.com/downloads/support/forum/121121/ze/saveloadsample1583379421

Please refer to the KB link below which shows how to perform save and load diagram from database.

KB link:https://www.syncfusion.com/kb/3049/how-to-save-and-load-diagram-from-database

Regards,
Shyam G

[Prasanth]

Hi Shyam,

Thanks for the reply & code.  I can see that we can save the diagram as a whole jsonstring? Is there way to save the individual nodes as objects in database.  To achieve this do we need to parse jsonstring to get the individual objects?

For example if we have 3 linear objects/nodes connected by connectors.  I want to be able to save 3 entries (one per node) in the database with parent node infor as well.

Regards

Prasanth

[Shyam G]

Hi Prasanth,

We are glad to inform you that we have created a simple sample to save each shape into the database. Please see the code snippet below.

function save() {

        var file = [];

        var diagram = null;

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

        for (i = 0; i < diagram.model.nodes.length; i++) {

            var shape = diagram.model.nodes[i];

            //push the shape into array

            file.push(shape);

        }

        var Jsonsave= diagram.save();

        //convert JSON object to JSON string

        var Jsonstringify = JSON.stringify(file);

        $.ajax({

            url: "/Entity/save",

            type: "Post",

            dataType: "json",

            data: { "jsonstring": Jsonstringify },

            success: function (Jsonstringify) {

                alert("Success");

                return true;

            },

        });
    } 

  [HttpPost]

        public ActionResult save(string jsonstring)

        {

                JArray objects = JArray.Parse(jsonstring);

                JArray items = (JArray)objects;

                int length = items.Count;

                for (int i = 0; i < items.Count; i++)

                {

                    var item = (JObject)items[i];

                    var name = item["name"].ToString();

                    string json_data = JsonConvert.SerializeObject(item);

                    Northwindcontext13DiagramEntities entities = new Northwindcontext13DiagramEntities();

                    SaveDatabase save = new SaveDatabase();

                    //diagram name

                    save.DiagramName = "Diagram";

                    //json data

                    save.Jsondata = json_data;

                    //node name

                    save.Nodename = name;

                    entities.SaveDatabases.Add(save);

                    entities.SaveChanges();

                }

                return null;
            }  

Sample: http://www.syncfusion.com/downloads/support/directtrac/132775/saveeachshape475109138.zip

Regards,
Shyam G

[Prasanth]

Hi Shyam,

Thanks for the prompt reply, will definitely give it a go.

I haven't looked into the solution in depth, but just looking at the javascript it seems we are saving the nodes.  Sorry to be a pain, but is it possible to get the connector information i.e I just want to be able to know the parent / children relationship and save the information as well.  So it will be easier to implement flowchart based functionality.  Is there a way to detect the relationship between nodes?

If the solution you have provided allows identification (thus storing)  of relationship between nodes ignore this request.

Regards

Prasanth

[Kameshwaran R]

Hi Prasanth,

We can get the connector from the following ways.

1.we can get the connectors directly from the diagram.connectors collection

2.we can get the connector from the node.outEdges collection to get the flow of the diagram.

Both the ways are given in the below code snippet. Please find the below snippet.

        function save() {

            var file = [];

            var diagram = null;

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

            for (i = 0; i < diagram.model.nodes.length; i++) {

                var shape = diagram.model.nodes[i];

                //push the shape into array

                file.push(shape);

            }

            // you can save the connectors either from connector collection or from the out edges of the nodes. both the methods are described on below code snippet.

            // save all the connectors from connector collection

            for (i = 0; i < diagram.model.connectors.length; i++) {

                var connector = diagram.model.connectors[i];

                //push the shape into array

                file.push(connector);

            }

            // save all the connectors from nodes out edges

            for (i = 0; i < diagram.model.nodes.length; i++) {

                var node = diagram.model.nodes[i];

                if (node.outEdges && node.outEdges.length > 0) {

                    for (j = 0; j < node.outEdges.length; j++) {

                        var inEdge = diagram.getNode(node.outEdges[i])

                        file.push(inEdge);

                    }

                }

            }

            var Jsonsave = diagram.save();

            //convert JSON object to JSON string

            var Jsonstringify = JSON.stringify(file);

            $.ajax({

                url: "/Entity/save",

                type: "Post",

                dataType: "json",

                data: { "jsonstring": Jsonstringify },

                success: function (Jsonstringify) {

                    alert("Success");

                    return true;

                },

            });
        }


Please let me know if you need further assistance.

Regards,
Kameshwaran R.

[Megatron]

Hi, I also have the same need with ASP MVC,

Can you please tell me what are the Syncfusion Diagram functions for the server side to get the diagram state and manipulation in server-side, so I can move boxes based on BPM decision tree next yes, no, or previous, state in the BPM, based on the decision tree and save like this http://www.syncfusion.com/forums/123562/diagram-save-into-the-database

or  http://bit.ly/1S08M9E

[Shyam G]

Hi Megatron,

To achieve your requirement, you can use DiagramProperties ParseModel object in the server side which converts JSON string into the object. Please refer to the code example and sample below.

Code example:
 

[HttpPost]

        public ActionResult save(string stringify)

        {

            DiagramProperties data = new DiagramProperties();

            //parse the JSON string into model object

            data.ParseModel(stringify);

            //you can do your code here

            return null;
        }

Sample:http://www.syncfusion.com/downloads/support/forum/121121/ze/savesample-1243763079

Regards,
Shyam G