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

Having challenge trying to generate swimlane from code behind


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

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.");
            var lane1ChildrenCollection = new Collection();
            var child1 = CreateNode("Task", "Task 1", pathDataTask, "white", true, true, 60, 120, 200, 70);
            lane1.Children = lane1ChildrenCollection;
            var lane2 = AddLane("Customer");
            var lane2ChildrenCollection = new Collection();
            var child2 = CreateNode("Task", "Task 2", pathDataTask, "white", true, true, 60, 120, 200, 70);
            lane2.Children = lane2ChildrenCollection;
            swimlane.Lanes = laneCollection;
            swimlane.OffsetX = (int)(swimlane.Width / 2 + 150);
            swimlane.OffsetY = (int)(swimlane.Height / 2 + 150);

        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;
            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";

            return node;
Any suggestions would be much appreciated.

Thanks in advance.


9 Replies

RT Ramya Thirugnanam Syncfusion Team December 21, 2018 04:10 AM

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

JJ Jim Jacobs January 2, 2019 03:58 PM

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.


RT Ramya Thirugnanam Syncfusion Team January 3, 2019 01:31 AM

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

JJ Jim Jacobs January 3, 2019 11:33 AM

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.



RT Ramya Thirugnanam Syncfusion Team January 4, 2019 07:21 AM

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(); 
        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(); 
        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 
Ramya T 

JJ Jim Jacobs January 4, 2019 11:37 AM

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.


RT Ramya Thirugnanam Syncfusion Team January 7, 2019 04:01 AM

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

JJ Jim Jacobs February 14, 2019 08:12 AM


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.


RT Ramya Thirugnanam Syncfusion Team February 16, 2019 04:20 AM

Hi Jim, 
You can de-serialize the JSON object by using the below code example. 
Ramya T 

Live Chat Icon For mobile
Up arrow icon