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 Feedback

Drop event not fired when...

Thread ID:

Created:

Updated:

Platform:

Replies:

117670 Nov 25,2014 10:26 PM UTC Jul 30,2018 12:41 PM UTC ASP.NET Web Forms 20
loading
Tags: Diagram
Jim Jacobs
Asked On November 25, 2014 10:26 PM UTC

Hi,

When using the Diagram Builder, I can simply click on a node in the palette and it is dropped on the canvas.
However, I am performing some actions in the drop event so I need one of two things:
  • To disable the single click on the palette items, or
  • To ensure the drop event is fired upon single click of a palette item

Additionally, I also need the drop event fired if I click on the "clone" icon when a node is selected.

As usual, your advice appreciated.

Thanks in advance

Jim


Shyam G [Syncfusion]
Replied On November 26, 2014 01:13 PM UTC

Hi Jim

Thanks for using Syncfusion products.

Please note that “drop” event triggered when the node is dropped inside the diagram area(canvas). We suggest you to use “NodeCollectionChange” event to achieve your requirement and this event triggered when we click the item in the palette and also when we click the “clone” handles, when a node is selected. We have attached sample below. Please see the code snippet below.

Here is the code snippet

 

<ej:Diagram ID="DiagramContent" runat="server" Height="100%" Width="100%">

                </ej:Diagram>

 

DiagramContent.OnClientNodeCollectionChange = "NodeCollectionChanged";

 

function NodeCollectionChanged(args) {

   

}

Please let me know if any concerns.

Regards,

Shyam G


Attachment: DiagramBuilder_sample2065910574_(4)_7bf7464d.zip

Jim Jacobs
Replied On November 26, 2014 11:52 PM UTC

Hi Shyam,

I tried what you suggested, but the event does not fire.
Tested in both IE and FireFox.

My code:

CS:
  DiagramContent.OnClientNodeCollectionChange = "NodeCollectionChange";
ASPX:
  function NodeCollectionChange(args) {
                alert('Hello');
                alert(args.element.name + ' - ' + args.changetype);
            }


What now?

Jim


Shyam G [Syncfusion]
Replied On November 27, 2014 03:51 AM UTC

Hi Jim

Thanks for the update.

Please note that if you are using a Diagram builder application, We have already triggered  a “nodeCollectionChange” event on client side in the “diagrambuilder.js” file. If you trigger a “nodeCollectionChange” event in server side in the same Diagram builder application then the “nodeCollectionChange” event will not be triggered. So we suggest you to remove the client side “nodeCollectionChange” event of diagram.model.nodeCollectionChange = nodecollectionchanged;in  the “diagrambuilder.js” file and use the server side “nodeCollectionChange” event. Please see the code snippet below to use the server side “nodeCollectionChange” event.

Here is the code snippet

 

DiagramContent.OnClientNodeCollectionChange = "NodeCollectionChanged";

 

function NodeCollectionChanged(args) {

   

}

We have attached sample below for your reference.

Please let me know if any concerns.

Regards,

Shyam G


Attachment: DiagramBuilder_sample2065910574_(5)_9fa0e4a6.zip

Jim Jacobs
Replied On November 30, 2014 05:23 PM UTC

Hi Shyam,

I'm having some challenges using the nodeCollectionChange event.
I've attached a video that demonstrates my issues.
I'm performing 3 operations in this video in this order:
  1. Simply left clicking on a shape in the palette
  2. Clicking on the Clone handle of the shape that was just dropped
  3. Dragging a shape from the palette

In all cases the nodeCollectionChange event fires, but the "changetype" is always undefined.

What I am trying to do is drag one shape from the palette and when it is dropped, have another shape appear.

You'll see this happen for operation #3 - after the nodeCollectionChange event fires.

But I want the same thing to occur for the other 2 operations.

In my event handler for the nodeCollectionChange event, I'm calling the drop event handler.

Here's the code:

function dropHandler(args) {
                if (args.element) {
                    if (!args.element.isSwimlane) {
                        var node = args.element;
                        if (node.addInfo.ContentId) {
                            var svg = document.getElementById(node.addInfo.ContentId);
                            if (node.addInfo.DropWidth) {
                                node.width = node.addInfo.DropWidth;
                                node.height = node.addInfo.DropHeight;
                            } else {
                                node.width = 120;
                                node.height = 60;
                            }
                            diagram.updateNode(node.name, { shape: { content: svg, type: "native" } });
                        }
                    }
                }
            }

            function NodeCollectionChange_Handler(args) {
                alert('In NodeCollectionChange - name = ' + args.element.name + '   changetype = ' + args.changetype);
                dropHandler(args);
            }

How can I achieve the same end result for operations 1 & 2 as I do for 3?

Thanks

Jim




Attachment: Syncfusion__nodeCollectionChange_Event_Issue__30Nov2014_969bc6df.zip

Shyam G [Syncfusion]
Replied On December 1, 2014 05:04 PM UTC

Hi Jim

 

Thanks for the update.

 

Query

Response

I'm performing 3 operations in this video in this order:

  1. Simply left clicking on a shape in the palette
  2. Clicking on the Clone handle of the shape that was just dropped
  3. Dragging a shape from the palette

In all cases the nodeCollectionChange event fires, but the "changetype" is always undefined.

 

We suggest you to set “changetype” as “changeType” to resolve your issue. We have modified your  code  and provided below

 

function nodecollectionchange(args) {

    alert('In NodeCollectionChange - name = ' + args.element.name + '   changetype = ' + args.changeType);

}

 

What I am trying to do is drag one shape from the palette and when it is dropped, have another shape appear.

You'll see this happen for operation #3 - after the nodeCollectionChange event fires.

But I want the same thing to occur for the other 2 operations.

In my event handler for the nodeCollectionChange event, I'm calling the drop event handler.

Here's the code:

function dropHandler(args) {
                if (args.element) {
                    if (!args.element.isSwimlane) {
                        var node = args.element;
                        if (node.addInfo.ContentId) {
                            var svg = document.getElementById(node.addInfo.ContentId);
                            if (node.addInfo.DropWidth) {
                                node.width = node.addInfo.DropWidth;
                                node.height = node.addInfo.DropHeight;
                            } else {
                                node.width = 120;
                                node.height = 60;
                            }
                            diagram.updateNode(node.name, { shape: { content: svg, type: "native" } });
                        }
                    }
                }
            }

            function NodeCollectionChange_Handler(args) {
                alert('In NodeCollectionChange - name = ' + args.element.name + '   changetype = ' + args.changetype);
                dropHandler(args);
            }

How can I achieve the same end result for operations 1 & 2 as I do for 3?

 

We are analyzing on your requirement of rendering different preview in the canvas when an item is click in the palette. We will update you with more information in one business day.

 

Please let me know if any concerns.

 

Regards,

Shyam G


Shyam G [Syncfusion]
Replied On December 2, 2014 01:30 PM UTC

Hi Jim

 

Thanks for your patience.

 

Query

Response

What I am trying to do is drag one shape from the palette and when it is dropped, have another shape appear.

You'll see this happen for operation #3 - after the nodeCollectionChange event fires.

But I want the same thing to occur for the other 2 operations.

In my event handler for the nodeCollectionChange event, I'm calling the drop event handler.

Here's the code:

function dropHandler(args) {
                if (args.element) {
                    if (!args.element.isSwimlane) {
                        var node = args.element;
                        if (node.addInfo.ContentId) {
                            var svg = document.getElementById(node.addInfo.ContentId);
                            if (node.addInfo.DropWidth) {
                                node.width = node.addInfo.DropWidth;
                                node.height = node.addInfo.DropHeight;
                            } else {
                                node.width = 120;
                                node.height = 60;
                            }
                            diagram.updateNode(node.name, { shape: { content: svg, type: "native" } });
                        }
                    }
                }
            }

            function NodeCollectionChange_Handler(args) {
                alert('In NodeCollectionChange - name = ' + args.element.name + '   changetype = ' + args.changetype);
                dropHandler(args);
            }

How can I achieve the same end result for operations 1 & 2 as I do for 3?

 

We are glad to inform you that we have created a sample to achieve your requirement of  rendering different preview in the canvas using “nodeCollectionChange” event. This event triggers before the node gets added in the diagram. So you can give SVG element in the “node.shape.content”.Please see the code snippet below. We have attached sample below

 

function nodecollectionchange(args) {

    if (args.element.shape) {

        var node = args.element;

        node.width = 100;

        if (node.addInfo.Id) {

            //gets the id of SVG element

            var svg = document.getElementById(node.addInfo.Id);

            var child = svg.lastElementChild.firstElementChild;

            child.setAttribute('transform', 'translate(-257.23333,-247.97111)');

            node.shape.content = svg;

            node.shape.type = "native";

        }

    }

}

 

 

 

 

Please let me know if any concerns.

 

Regards,

Shyam G


Attachment: Diagrambuilder_2a273299.zip

Jim Jacobs
Replied On December 2, 2014 02:00 PM UTC

Hi Shyam,

We are making progress converting all of our svg shapes into single path statements so that we can move away from "native" shapes as you suggested in an earlier post.
How would your solution change if both the palette shape and the shape that should appear when dropped are both "path" shapes?

Thanks for any guidance.

Jim

Shyam G [Syncfusion]
Replied On December 3, 2014 12:06 PM UTC

Hi Jim

Thanks for the update.

We are glad to inform you that we have created a sample to achieve your requirement of rendering different preview in the canvas with path node. Please see the code snippet below which represents how to render path node in the “drop” event and “nodeCollectionChange” event. We have attached sample below.

 

nodeCollectionChange

 

function nodecollectionchange(args) {  

    if (args.element.shape) {

        var node = args.element;

        node.width = 100;

        node.shape.pathData = "M114-0.25H6c-3.313,0-6,2.687-6,6v48c0,3.312,2.687,6,6,6h108c3.312,0,6-2.688,6-6v-48 C120,2.437,117.312-0.25,114-0.25z M23.186,5.917l-7.978,6.44L7.23,5.917H23.186z M24,17H6.417V6.545l8.791,7.097L24,6.545V17z";

         

    }

}

 

Drop

 

function drop(args) {    

    if (args.element) {

        if (args.element.shape) {

            var node = args.element;

            node.width = 100;

            diagram.updateNode(node.name, { shape: { pathData: "M114-0.25H6c-3.313,0-6,2.687-6,6v48c0,3.312,2.687,6,6,6h108c3.312,0,6-2.688,6-6v-48 C120,2.437,117.312-0.25,114-0.25z M23.186,5.917l-7.978,6.44L7.23,5.917H23.186z M24,17H6.417V6.545l8.791,7.097L24,6.545V17z", type: "path" } });

 

        }

    }

}

Please let me know if any concerns.

Regards,

Shyam G


Attachment: diagrambuilderwithpathnode_da068b94.zip

Russ Brasher
Replied On July 18, 2018 03:02 PM UTC

When I try to run this project in the zip file diagrambuilderwithpathnode_da068b94.zip, it loads, but displays basicDialog1 and will not go any further.  Can you please tell me why it does this and how to fix it?
Thank You,
- Russ B

Jim Jacobs
Replied On July 18, 2018 03:33 PM UTC

Hi Russ,

Wow, this incident is almost 4 years old. 
Initially we were using the Syncfusion provided diagrambuilder app as it looked like it would do most of what we wanted.
But that didn't last long since our diagram is very tightly connected to a database.
For example when you drop a shape on the diagram, we call a webservice to create a new record in the database, and the key for that record is stored in the shape's addInfo property collection.

So, I can't answer your question, but I suspect that it has something to do with how old that zip file is.

Good luck with the diagram control.  

Jim

Naganathan Ganesh Babu [Syncfusion]
Replied On July 19, 2018 01:18 PM UTC

Hi Russ, 
The pathSegList property is used internally to render the path nodes and it is depreciated in the chrome browser version 48. So, diagram will not be rendered in Chrome browser 48. The reported issue has been fixed from version >13.4. so please upgrade to our latest version 16.2.0.41 to resolve your reported issue. Also, you can download the latest version script files from custom script generator. 
 
 
Please refer to the KB link which shows how to get the diagram builder sample code from dashboard. 
 
 
Regards, 
Naganathan K G  


Russ Brasher
Replied On July 23, 2018 01:14 PM UTC

Thanks for the reply, Jim.  What you describe is exactly the kind of thing we're trying to do -- very tight database integration.  What direction did you wind up taking?

Thanks,

- Russ

Russ Brasher
Replied On July 24, 2018 09:02 PM UTC

Thanks Naganathan K G, but none of these suggestions are working.

I don't know how, exactly, to "upgrade" the sample project to the latest version.  It appears that I have version 16.2460.0.41 installed, but how do I get that into the sample project?  What files do I need?  Which files are not necessary?  The references and folder structure between the sample project and a new project are vastly different.  There is no upgrade wizard that I can find, and trying to do this manually has proven to be next to impossible.

I tried using the script generator.  After about an hour, it still says, "Please wait while we generated the custom script...".  It appears to be stuck or not working somehow, so that hasn't helped.

The kb link to which you referred me hasn't helped, either.  The current dashboard looks nothing like the example.  It references version 13.4.0.56, and of course the current version is way beyond that at 16.2.0.41.  The path it suggests (...Syncfusion\EssentialStudio\13.4.0.56\JavaScript\samples\web\dashboard\diagrambuilder) doesn't exist in my Syncfusion installation.  I did find ...C:\Users\Public\Documents\Syncfusion\ASP.NET\16.2.0.41\Samples\Web\Dashboard\DiagramBuilder.aspx (and .cs), but there are no .js files there with that file in that folder.  I also found the folder ...C:\Users\Public\Documents\Syncfusion\JavaScript\16.2.0.41\samples\web\diagram, but those are all .html files -- not js or css files.  Do I need all of those files, too?  What about all of the files automatically brought into the project when I created a new Syncfusion project in Visual Studio?  Are *all* of those necessary.

Can you please give me up-to-date, step-by-step instructions on how to re-create the Diagram Builder shown in "Essential JS 1 for ASP.NET Web Forms?

Thanks,

- Russ


Naganathan Ganesh Babu [Syncfusion]
Replied On July 25, 2018 01:14 PM UTC

Hi Russ, 
 
Sorry for the inconvenience caused. 
 
I don't know how, exactly, to "upgrade" the sample project to the latest version.  It appears that I have version 16.2460.0.41 installed, but how do I get that into the sample project?  What files do I need?  Which files are not necessary?  The references and folder structure between the sample project and a new project are vastly different.  There is no upgrade wizard that I can find, and trying to do this manually has proven to be next to impossible. 
 
If you need to the upgrade your project, we suggest you to replace the Syncfusion.EJ and Syncusion.EJ.Web dlls. 
 
Also, you need to replace the ej.web.all.min.js and themes related files from the latest version of installed location of Syncfusion control panel. 
I tried using the script generator.  After about an hour, it still says, "Please wait while we generated the custom script...".  It appears to be stuck or not working somehow, so that hasn't helped. 
We have created a new incident for this query please follow up that incident for further details. 
 
 
The kb link to which you referred me hasn't helped, either.  The current dashboard looks nothing like the example.  It references version 13.4.0.56, and of course the current version is way beyond that at 16.2.0.41.  The path it suggests (...Syncfusion\EssentialStudio\13.4.0.56\JavaScript\samples\web\dashboard\diagrambuilder) doesn't exist in my Syncfusion installation.  I did find ...C:\Users\Public\Documents\Syncfusion \ASP.NET\16.2.0.41\Samples\Web\ Dashboard\DiagramBuilder.aspx (and .cs), but there are no .js files there with that file in that folder.  I also found the folder ...C:\Users\Public\Documents\ Syncfusion\JavaScript\16.2.0.41\samples\ web\diagram, but those are all .html files -- not js or css files.  Do I need all of those files, too?  What about all of the files automatically brought into the project when I created a new Syncfusion project in Visual Studio?  Are *all* of those necessary. 
 
Please refer to the below attached document to get referenced files from the latest version of Syncfusion dashboard and create the sample. 
 
 
Regards, 
 
Naganathan K G 


Naganathan Ganesh Babu [Syncfusion]
Replied On July 25, 2018 01:16 PM UTC

Hi Russ, 
 
Sorry for the inconvenience caused and please ignore our previous update. 
 
I don't know how, exactly, to "upgrade" the sample project to the latest version.  It appears that I have version 16.2460.0.41 installed, but how do I get that into the sample project?  What files do I need?  Which files are not necessary?  The references and folder structure between the sample project and a new project are vastly different.  There is no upgrade wizard that I can find, and trying to do this manually has proven to be next to impossible. 
 
If you need to the upgrade your project, we suggest you to replace the latest version of Syncfusion.EJ and Syncusion.EJ.Web dlls from the below installed location. 
 
[InstalledDrive]:\Program Files (x86)\Syncfusion\Essential Studio\ASP.NET\16.2.0.41\precompiledassemblies 
 
Also, you need to replace the ej.web.all.min.js and themes related files from the latest version of installed location of Syncfusion control panel. 
I tried using the script generator.  After about an hour, it still says, "Please wait while we generated the custom script...".  It appears to be stuck or not working somehow, so that hasn't helped. 
We have created a new incident for this query please follow up that incident for further details. 
 
 
The kb link to which you referred me hasn't helped, either.  The current dashboard looks nothing like the example.  It references version 13.4.0.56, and of course the current version is way beyond that at 16.2.0.41.  The path it suggests (...Syncfusion\EssentialStudio\13.4.0.56\JavaScript\samples\web\dashboard\diagrambuilder) doesn't exist in my Syncfusion installation.  I did find ...C:\Users\Public\Documents\Syncfusion \ASP.NET\16.2.0.41\Samples\Web\ Dashboard\DiagramBuilder.aspx (and .cs), but there are no .js files there with that file in that folder.  I also found the folder ...C:\Users\Public\Documents\ Syncfusion\JavaScript\16.2.0.41\samples\ web\diagram, but those are all .html files -- not js or css files.  Do I need all of those files, too?  What about all of the files automatically brought into the project when I created a new Syncfusion project in Visual Studio?  Are *all* of those necessary. 
 
Please refer to the below attached document to get referenced files from the latest version of Syncfusion dashboard and create the sample. 
 
 
Regards, 
 
Naganathan K G 


Russ Brasher
Replied On July 25, 2018 03:55 PM UTC

Thank you, Naganathan K G -- excellent response!  The directions on getting the Diagram Builder to work make good sense.

Thanks for the link to the support incident, however when I go to the link, I simply see a message that says, "No support incidents are associated with your account."  Is there some other way to track progress on this incindent?

Best,

- Russ Brasher

Russ Brasher
Replied On July 25, 2018 08:22 PM UTC

Thanks again, Naganathan K G.  I got the Diagram Builder to come up by adding the files you instructed, but the style is not right.  Please see the attached file to see what I mean.  I suspect that one or more css files are missing, or the paths to the correct css files are not correct.  I copied all of the files in your instructions to a folder named dialogBuilder in the root of the project.  I then edited DialogBuilder.aspx to make the css links and script src point to the files in this directory.

Am I still missing some files?  If so, which ones?  What css classes control the items that are not displaying correctly (and in which css files to they exist)?  Is there a strict structure I should follow for the rel='nofollow' href and src paths for the <link> css and <script> js tags?

Thank you for your help!

Best,

- Russ Brasher

Attachment: CSSmessedUp_ff00b18d.zip

Russ Brasher
Replied On July 25, 2018 11:52 PM UTC

Naganathan K G. - I still can't get the style right.  The menus keep coming out wrong (no arrows, size not right, hover behavior not right), the pallet headings are not correct and missing images... a bunch of stuff is not correct (as in the file I previously attached).  I've put all of the exact same files in the exact same relative positions as the Sample and made the references in my DiagramBuilder.aspx file exactly the same as the sample, and the styles STILL don't come out right.  I have tried using Chrome to inspect the elements, but the css layers are just too deep.  Can you please give me some further, exact guidance on this?  

Where are these styles and images coming from??

Thanks,

- Russ Brasher

Naganathan Ganesh Babu [Syncfusion]
Replied On July 26, 2018 11:20 AM UTC

Hi Russ,    
 
We have modified the below attached documents to get the referenced files from dashboard.    
 
   
Also, we have created a sample with reference to the above documentation.   
   
   
Thanks for the link to the support incident, however when I go to the link, I simply see a message that says, "No support incidents are associated with your account."  Is there some other way to track progress on this incindent?   
Sorry for inconvenience caused.   
   
Due to some internal issue, yesterday incident was not created. Now, we have created the incident for this query and kindly follow up with the incident further updates.   
   
   
Regards,   
   
Naganathan K G   
 


Jim Jacobs
Replied On July 30, 2018 12:41 PM UTC

Hi Russ,

It would probably be best if we chat outside of these forums.
I could give you a demo of what we've built and discuss our approach.
Not sure what timezone you're situated in - I'm on EDT.

You can reach me at jjacobs@navvia.com

Jim Jacobs

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.

Warning Icon 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.Close Icon

;