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.

Having challenge trying to generate swimlane from code behind

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 laneCollection = new Collection();
var lane1ChildrenCollection = new Collection();
lane1.Children = lane1ChildrenCollection;
var lane2ChildrenCollection = new Collection();
lane2.Children = lane2ChildrenCollection;
swimlane.Lanes = laneCollection;
swimlane.OffsetX = (int)(swimlane.Width / 2 + 150);
swimlane.OffsetY = (int)(swimlane.Height / 2 + 150);

{
var swimlane = new SwimLane();
swimlane.Type = "swimlane";
swimlane.Name = "Horizontal-Lane-swimlane";
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;
}

{
Lane lane = new Lane();
lane.Name = "lane" + RandomString(4);
lane.FillColor = "white";
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.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();
label.Offset = new DiagramPoint(0.95f, 0.1f);
label.HorizontalAlignment = HorizontalAlignment.Right;
label.FontColor = "blue";
label.Name = "identifierLabel";
}

CreateRectanglePorts(node);
return node;
}
Any suggestions would be much appreciated.

Jim

9 Replies

RT Ramya Thirugnanam Syncfusion Team 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

JJ Jim Jacobs 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?

Jim

RT Ramya Thirugnanam Syncfusion Team 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

JJ Jim Jacobs January 3, 2019 04:33 PM UTC

Hi Ramya,

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

RT Ramya Thirugnanam Syncfusion Team 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.

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

JJ Jim Jacobs 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.

Thanks for your attention to this post.

Jim

RT Ramya Thirugnanam Syncfusion Team 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");

Regards
Ramya T

JJ Jim Jacobs 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

RT Ramya Thirugnanam Syncfusion Team 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