Having challenge trying to generate swimlane from code behind

[Jim Jacobs]

Hi,

We're trying to create a simple proof of concept to create a swimlane with 2 lanes, and a single node in each lane.

I would appreciate it of someone can review my code below and tell me what I'm doing wrong.

Running version 16.3.0.29.

Here's what my code generates:

And here's my code:

            var swimlane = AddSwimlane("My Process");
            var laneCollection = new Collection();
            var lane1 = AddLane("Change Mgr.");
            laneCollection.Add(lane1);
            var lane1ChildrenCollection = new Collection();
            var child1 = CreateNode("Task", "Task 1", pathDataTask, "white", true, true, 60, 120, 200, 70);
            lane1ChildrenCollection.Add(child1);
            lane1.Children = lane1ChildrenCollection;
            var lane2 = AddLane("Customer");
            laneCollection.Add(lane2);
            var lane2ChildrenCollection = new Collection();
            var child2 = CreateNode("Task", "Task 2", pathDataTask, "white", true, true, 60, 120, 200, 70);
            lane2ChildrenCollection.Add(child2);
            lane2.Children = lane2ChildrenCollection;
            swimlane.Lanes = laneCollection;
            swimlane.OffsetX = (int)(swimlane.Width / 2 + 150);
            swimlane.OffsetY = (int)(swimlane.Height / 2 + 150);
            DiagramContent.Model.Nodes.Add(swimlane);

        protected SwimLane AddSwimlane(string Title)
        {
            var swimlane = new SwimLane();
            swimlane.Type = "swimlane";
            swimlane.Name = "Horizontal-Lane-swimlane";
            Header header = new Header();
            header.Text = Title;
            header.Height = 50;
            header.FillColor = "lightyellow";
            header.FontSize = 18;
            swimlane.Header = header;
            swimlane.FillColor = "white";
            swimlane.Orientation = "horizontal";
            swimlane.Height = 100;
            swimlane.Width = 900;
            swimlane.PhaseSize = 0;
            swimlane.MaxWidth = 1300;
            swimlane.MaxHeight = 1000;
            swimlane.PhaseSize = 0;
            return swimlane;
        }

        protected Lane AddLane(string headerText)
        {
            Lane lane = new Lane();
            lane.Name = "lane" + RandomString(4);
            Header header = new Header();
            header.Text = headerText;
            header.Width = 60;
            header.FillColor = "yellow";
            header.FontSize = 12;
            header.FontColor = "#000000";
            lane.FillColor = "white";
            lane.Header = header;
            lane.Height = 120;
            return lane;
        }

        private BasicShape CreateNode(string type, string mainlabel, string pathData, string color, bool mainLabel, bool identifierLabel, int height, int width, double offsetX, double offsetY)
        {
            var node = new BasicShape();
            node.Name = type + RandomString(4);
            node.Width = width;
            node.Height = height;
            node.OffsetX = offsetX;
            node.OffsetY = offsetY;
            node.Shape = BasicShapes.Path;
            node.PathData = pathData;
            node.BorderWidth = 1;
            node.FillColor = (color != null) ? color : "white";

            if (mainLabel)
            {
                var label =
                    new Syncfusion.JavaScript.DataVisualization.Models.Diagram.Label(); // Add the main node label
                label.FontColor = "black";
                label.Name = "mainLabel";
                if (type.StartsWith("Data"))
                {
                    label.Margin = new LabelMargin { Top = 50 }; // Place the label below Data & Event shapes
                    node.Constraints = NodeConstraints.Default | NodeConstraints.DragLabel; // Allow the label to be moved by user
                }
                if (type.EndsWith("Event")) // TFS1241
                {
                    label.Margin = new LabelMargin { Top = 35 }; // Place the label below Data & Event shapes
                    node.Constraints = NodeConstraints.Default | NodeConstraints.DragLabel; // Allow the label to be moved by user
                }
                if (type == "InterProcess") // For InterProcess shapes force the label to occupy the right rectangle - added 27Oct2015 by Jim
                {
                    label.Offset = new DiagramPoint(0.58f, 0.5f);
                    label.HorizontalAlignment = HorizontalAlignment.Center;
                    label.TextAlign = Syncfusion.JavaScript.DataVisualization.DiagramEnums.TextAlign.Center;
                    label.Margin = new LabelMargin { Left = 8, Right = 7 };
                }
                if (type == "Unknown")
                {
                    label.Bold = true;
                }
                label.Text = mainlabel;
                node.Labels.Add(label);
            }
            if (identifierLabel)
            {
                var label = new Syncfusion.JavaScript.DataVisualization.Models.Diagram.Label();
                // Add the task identifier label
                label.Offset = new DiagramPoint(0.95f, 0.1f);
                label.HorizontalAlignment = HorizontalAlignment.Right;
                label.TextAlign = Syncfusion.JavaScript.DataVisualization.DiagramEnums.TextAlign.Right;
                label.FontColor = "blue";
                label.Name = "identifierLabel";
                node.Labels.Add(label);
            }

            CreateRectanglePorts(node);
            return node;
        }

Any suggestions would be much appreciated.

Thanks in advance.

Jim

[Ramya Thirugnanam]

Hi Jim, 

 

We have modified the provided code example to resolve the reported issue and code usage to create swim lane. Please find the sample from the below link. 

 

Sample Link: http://www.syncfusion.com/downloads/support/directtrac/general/ze/ASPNET-Webforms-Swim_lane799583524 

 

Regards, 

Ramya T 

[Jim Jacobs]

Hi Ramya,

Thanks for the code - it was very helpful.

But now we have a new question.

It's actually a question I asked a few years ago, but I hope the answer might be different today :)

Is there any way to save (serialize) the diagram that we have created in code behind so that we can save the JSON data in a database?

Currently in our application we use the diagram.save client-side function to accomplish this, but for what we're trying to do now, we really need to accomplish the serialization server-side.

Any suggestions?

Thanks in advance.

Jim

[Ramya Thirugnanam]

Hi Jim,  

 

We can save the serialized diagram (JSON) in string format to the database.  The diagram.model.parsemodel method helps to convert the JSON string into diagram model. 

In this diagram model, you can find the diagram elements as server-side object. We have provided code example to achieve this. 

  

 Diagram1.Model.ParseModel("Pass your Json String Here");  

 

//By using diagram model, you can get the connectors. 

 

 Connector connector = new Connector(); 

 connector.Name = (Diagram1.Model.Connectors[0] as Connector).Name;  

 

//Here Diagram1 is an ID of a diagram control   

  

Could you please let us know whether the provided solution helps to resolve the requirement ? if not, please provide elaborate the scenario which needs to save the diagram as server-side object. 

 

Regards,  

Ramya T 

[Jim Jacobs]

Hi Ramya,

Thanks for the reply.

I am really looking at "getting" the JSON data for the diagram that I've just built in code behind so that it can be saved in the database.

I see that there is a Save method, but it seems to want the JSON data as a parameter.  I just want to get the JSON data for my diagram and assign it to a string variable.  I can then insert this into our database.  

I came across this in your documentation, but it wants JSON data passed to it:

http://help.syncfusion.com/cr/cref_files/aspnet/Syncfusion.EJ~Syncfusion.JavaScript.DataVisualization.Models.DiagramProperties~Save.html

Hope you can help me understand how to accomplish what I'm trying to do.

Thanks

Jim

[Ramya Thirugnanam]

Hi Jim, 

 

Please use PageMethods to send the node details from client side to server side . We have created a sample in which we have send a JSON string from client side to the server side. Please refer to below code example  

 

Code example: 

 

function save() { 

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

            var nodeData = diagram.save(); 

            PageMethods.save(nodeData); 

        } 

 

 

[WebMethod] 

        public static void save(string nodeData) 

        { 

            // you can get the string and store it in database 

        } 

 

 

The client side,  load method is used to load the data in diagram. Please use PageMethods load to send the load data to client side. In client side,  you can access the data and parse it. Now,  the parse data can be loaded in diagram through load method. 

 

 

Please find below code snippet for how to load the data in diagram.  

 

function load() { 

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

            var load = PageMethods.load(); 

            diagram.load(JSON.parse(load)); 

        } 

 

[WebMethod] 

        public static string load() 

        { 

            return "get your data from database"; 

        } 

 

 

We have created a sample for your requirement. Please find the sample in below link 

 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/Swimlane_-_save_and_load-699486015 

 

Please set the preventDefaultValues true by using SerializationSettings to avoid default properties get serialized. Please find below code example 

 

Code example:  

 

 

Diagram2.Model.SerializationSettings.PreventDefaultValues = true; 

 

Note: Here Diagram2 is an Id of  Diagram control 

 

Regards 

Ramya T 

[Jim Jacobs]

Hi Ramya,

Thanks for the code snippets.

But, we really would like a solution that does NOT require ANY client-side code.

In other words, we want to serialize the diagram that we build in code behind.

We do NOT want to display it until later on a different page (we'll retrieve the JSON data from the database and perform a diagram.load).

I asked this question a few years ago and the answer was NO, you cannot serialize in code behind.

Is that still the answer? 

Thanks for your attention to this post.

Jim

[Ramya Thirugnanam]

Hi Jim, 

 

Requirement : Serialize the diagram 

 

We have created a sample to achieve the requirement. The SerializeToJson property from serializeObject will provide the diagram json data. The data can be saved in database and then load it in diagram.  

 

 

Please find below code snippet for how to serialize the diagram 

 

SerializeObject serializeObject = new SerializeObject(); 

string save = serializeObject.SerializeToJson(Diagram2.Model, "Diagram2"); 

 

 

 Please refer to the sample from the following link. 

 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/Swimlane-Serialization157758134  

 

Regards 

Ramya T 

[Jim Jacobs]

Hi,

We did apply the technique that you provided in your previous post - thanks.

Here it is:

diagram.Model.SerializationSettings.PreventDefaultValues = true;

SerializeObject serializeObject = new SerializeObject();

string json = serializeObject.SerializeToJson(diagram.Model, diagramName);

Now for a new, but related question.

How do we de-serialize from code behind?

Another code snippet would be appreciated.

Thanks again.

Jim

[Ramya Thirugnanam]

Hi Jim, 

 

You can de-serialize the JSON object by using the below code example. 

 

Diagram2.Model.ParseModel(save); 

 

 

Regards, 

Ramya T