Syncfusion Diagram on fly

[pm]

Hi ,

I want to use Syncfusion Diagram control to create SSIS (ETL) kind of functionality at runtime. I found something similar to this here for telerik kendo controls.

http://demos.telerik.com/kendo-ui/html5-diagram-sample-app

Can I achieve the same functionality using Syncfusion diagram controls where I can build the flow chart on the fly using drag/drop & also save/retrieve diagram from SQL server. Please let me know if you have any sample code/demo available.

Thanks for your help.

[Shyam G]

Hi PM,

You can use our diagram builder sample to achieve your requirement. We have created a diagram builder sample and it is available for download in the below link

Sample:https://www.syncfusion.com/downloads/support/forum/123189/ze/Diagrambuildersample712696933

Regards,
Shyam G

[Kameshwaran R]

Hi PM,


Please ignore the previous update.

You can use our diagram builder sample to achieve your requirement, additionally we have included save and load the diagram using SQL server.

Here is the sample:  sample

Regards,
Shyam G

[pm]

It just worked fine.

Thank you so much.

I have couple of more questions.

1)  When I click on a shape it shows only one arrow. Can we able to show two arrows with different color on sides of rectangular shape? i.e. one on top & other in side?

2)  How can I add more custom properties to the shape? example : I want to add a filepath property and at runtime user can assign the file path & save that to database.

Thank you so much for your help.

[Shyam G]

Hi PM,

Query	Response
When I click on a shape it shows only one arrow. Can we able to show two arrows with different color on sides of rectangular shape? i.e. one on top & other in side?	In our diagram builder sample, we have created a user handle in the sample level(in methods.js). we have placed the line tool userhandle at the topright and middleright position. Please refer to the code example and online UG documentation link. UG documentation link:https://help.syncfusion.com/js/diagram/interaction#user-handles Code example: var linkHandle1 = ej.datavisualization.Diagram.UserHandle();     linkHandle1.name = "line1";     //position the user handle     linkHandle1.position = ej.datavisualization.Diagram.UserHandlePositions.TopRight;     linkHandle1.visible = true;     linkHandle1.tool = new LinkTool(linkHandle.name);     linkHandle1.size = 30;     //set color for handle     linkHandle1.backgroundColor = "blue";     linkHandle1.pathData = "M196.2104,93.6494L196.2104,90.2544L189.1674,90.2544L189.1674,87.6694L196.2104,87.6694L196.2104,84.7344L200.6674,89.1914z";     userHandles.push(linkHandle1); Also we have modified your sample and provided in the below link. Sample:https://www.syncfusion.com/downloads/support/forum/123189/ze/diagrambuildersample1058943040
How can I add more custom properties to the shape? example : I want to add a filepath property and at runtime user can assign the file path & save that to database.	You can use node’s addInfo property to create an custom property for the shape. Also we have have assigned the value for the addInfo property at runtime in the click event. If you click the save button, the custom property will be saved along with the node in the database.  Please refer to the code example below. //create an custom property for the node    Dictionary<string, object> addInfo = new Dictionary<string, object>();     addInfo.Add("filePath", "");     node.AddInfo = addInfo; //define click event  _model.Click = "nodeclick"; Events.js script file function nodeclick(args) {         var diagram = $("#diagram1").ejDiagram("instance");     if (args && args.element) {         args.element.addInfo.filePath = "labuser/tools";     } } Please refer to the sample attached in the above row.

Regards,
Shyam G

[pm]

Thank you So much. I am really amazed with your turn around time for all of my questions. We got couple of more requirement. I think these are last few questions I have.

1) Instead of showing shapes in left side pane, can we show small icon with Text ( something like

                 <icon image> Script task

                  <icon image>  File task

   and when user will drag the (<icon image> Script task) to drawing pane it will be rendered as textNode with image or image with rectangular shape. Something similar to SSIS.

2)  How can I add image to a textNode?

3) Can I change the color of (image with text node) on click of a button from controller method.

Thank you so much for your help.

[pm]

Also In the shapes how can I add design time property file path(custom property) like dimensions/Color etc. Thanks for showing the example for Runtime property.

[Shyam G]

Hi PM,

Query	Response
Instead of showing shapes in left side pane, can we show small icon with Text ( something like                  <icon image> Script task                   <icon image>  File task    and when user will drag the (<icon image> Script task) to drawing pane it will be rendered as textNode with image or image with rectangular shape. Something similar to SSIS.	Please use dragEnter event to achieve your requirement and this event Triggers when a symbol is dragged into diagram from symbol palette. please refer to the code example. Code example: function dragEnter(args) {        if (args) {         if (args.element.type === "image") {             //changing image node into rectangle             args.element.type = "basic";             args.element.shape = "rectangle";         } } We have modified your sample and provided below. Sample:https://www.syncfusion.com/downloads/support/forum/123189/ze/diagrambuilder29feb-1306897512
How can I add image to a textNode?	You cannot add an image to the text node but you can set an label for the image node to achieve your requirement. Also you can combine image node and text node and render it as a group node. Code example: //create an image node             ImageNode imgnode = new ImageNode() { Name = "imgnode", OffsetX = 200, OffsetY = 60, Width = 100, Height = 100, Type = Shapes.Image, Source = "../../Content/images/scripticon.png" };             imgnode.Parent = "group";             Label label = new Label();             label.Text = "image";             imgnode.Labels.Add(label);             Model.Nodes.Add(imgnode);             //create a text node             TextNode textnode = new TextNode() { Name = "textnode", BorderColor = "transparent", OffsetX = 300, OffsetY = 60, Width = 100, Height = 100, TextBlock = new TextBlock() { Text = "textnode" } };             textnode.Parent = "group";             //create a group node             Group group = new Group();             group.Name = "group";             group.Children.Add("imgnode");             group.Children.Add("textnode");             Model.Nodes.Add(imgnode);             Model.Nodes.Add(textnode);             Model.Nodes.Add(group);
Can I change the color of (image with text node) on click of a button from controller method.	You can use diagram client side API method updateNode  to achieve your requirement. please refer to the code example. Code example: function updatenode() {         var diagram = $("#DiagramContent").ejDiagram("instance");         var node = diagram.model.selectedItems.children[0];         if (node) {             //change the color of an node             diagram.updateNode(node.name, {fillColor:"red"})         }     }
Also In the shapes how can I add design time property file path(custom property) like dimensions/Color etc. Thanks for showing the example for Runtime property.	As we mentioned in earlier update, you can create an custom property for the shape using node’s addInfo property. Please confirm us whether you need to render the script template using node’s addInfo property(custom property. If so, you can pass alone the templateId in the node’s addInfo property(custom property). If we  misunderstood your requirement, please provide us more details such as elaborate your requirement in detail.

Regards,
Shyam G