Drop event not fired when...

[Jim Jacobs]

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]

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]

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]

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]

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]

Hi Jim

 

Thanks for the update.

 

Query	Response
I'm performing 3 operations in this video in this order: Simply left clicking on a shape in the palette Clicking on the Clone handle of the shape that was just dropped 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]

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]

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]

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]

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]

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]

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. 

 

Release link: https://www.syncfusion.com/forums/138315/essential-studio-2018-volume-2-release-v16-2-0-41-is-available-for-download 

Csg link: https://csg.syncfusion.com/ 

 

Please refer to the KB link which shows how to get the diagram builder sample code from dashboard. 

 

https://www.syncfusion.com/kb/6326/how-to-get-the-diagram-builder-sample-code-from-the-dashboard 

 

Regards, 

Naganathan K G  

[Russ Brasher]

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]

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]

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.    https://www.syncfusion.com/support/directtrac/incidents
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.    http://www.syncfusion.com/downloads/support/forum/117670/ze/document1312143729

 

Regards, 

 

Naganathan K G 

[Naganathan Ganesh Babu]

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.    https://www.syncfusion.com/support/directtrac/incidents
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.    http://www.syncfusion.com/downloads/support/forum/117670/ze/document1312143729

 

Regards, 

 

Naganathan K G 

[Russ Brasher]

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]

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]

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]

Hi Russ,    

 

We have modified the below attached documents to get the referenced files from dashboard.    

 

http://www.syncfusion.com/downloads/support/forum/117670/ze/document1897494109    

   

Also, we have created a sample with reference to the above documentation.   

   

http://www.syncfusion.com/downloads/support/forum/117670/ze/SyncfusionASPNETApplication1-1963206454   

   

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.        https://www.syncfusion.com/support/directtrac/incidents

   

Regards,   

   

Naganathan K G   

 

[Jim Jacobs]

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 [e-mail]

Jim Jacobs