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.
Unfortunately, activation email could not send to your email. Please try again.

Syncfusion Diagram on fly

Thread ID:

Created:

Updated:

Platform:

Replies:

123189 Feb 24,2016 02:46 PM Feb 29,2016 11:46 AM ASP.NET MVC 7
loading
Tags: Diagram
pm
Asked On February 24, 2016 02:46 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 [Syncfusion]
Replied On February 25, 2016 01:59 AM

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:http://www.syncfusion.com/downloads/support/forum/123189/ze/Diagrambuildersample712696933

Regards,
Shyam G

Kameshwaran R [Syncfusion]
Replied On February 25, 2016 07:00 AM

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
Replied On February 25, 2016 07:15 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 [Syncfusion]
Replied On February 26, 2016 05:05 AM

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:http://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:http://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
Replied On February 26, 2016 05:04 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
Replied On February 27, 2016 04:43 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 [Syncfusion]
Replied On February 29, 2016 11:46 AM

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:http://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

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.

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.

;