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.
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.
| 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"; |
| 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", ""); //define click event function nodeclick(args) { var diagram = $("#diagram1").ejDiagram("instance"); if (args && args.element) { args.element.addInfo.filePath = "labuser/tools"; } |
| 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"; |
| 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); |
| 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. |
