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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Having challenge trying to generate swimlane from code behind

Thread ID:

Created:

Updated:

Platform:

Replies:

141614 Dec 20,2018 10:15 PM UTC Feb 16,2019 09:20 AM UTC ASP.NET Web Forms 9
loading
Tags: Diagram
Jim Jacobs
Asked On December 20, 2018 10:15 PM UTC

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 [Syncfusion]
Replied On December 21, 2018 09:10 AM UTC

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. 
 
 
Regards, 
Ramya T 


Jim Jacobs
Replied On January 2, 2019 08:58 PM UTC

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 [Syncfusion]
Replied On January 3, 2019 06:31 AM UTC

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
Replied On January 3, 2019 04:33 PM UTC

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:

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

Thanks

Jim

Ramya Thirugnanam [Syncfusion]
Replied On January 4, 2019 12:21 PM UTC

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 
 
 
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
Replied On January 4, 2019 04:37 PM UTC

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 [Syncfusion]
Replied On January 7, 2019 09:01 AM UTC

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. 
 
 
Regards 
Ramya T 


Jim Jacobs
Replied On February 14, 2019 01:12 PM UTC

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 [Syncfusion]
Replied On February 16, 2019 09:20 AM UTC

Hi Jim, 
 
You can de-serialize the JSON object by using the below code example. 
 
Diagram2.Model.ParseModel(save); 
 
 
Regards, 
Ramya T 


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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon 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.Close Icon

Live Chat Icon For mobile
Live Chat Icon