Diagram Single Click Event not working after using pan

[Karthick]

Hi,

I have written a javascript method to handle single click event on any of the diagram nodes. It works correctly till I use the pan functionality. Once I use diagram pan to move the diagram and single click on any of the nodes is not working. I have attached the javascript method.

My diagram is having a swimlane and have the attachement to the diagram in one of the threads as well

https://www.syncfusion.com/forums/132895/loop-through-swimlane-children-nodes-in-javascript

Initially once the diagram is loaded and if i click on any nodes the below if condition passes where the args.elementType is node.

var node = args.element;

if (args.elementType === "node") {

If i use the pan then if click on the any of the diagram node then the args.elementType is set as group.

Can you please help identifying the problem?

Thanks,

Karthick

Attachment: SingleClickJavascriptMethod_5ea8cea5.zip

[Naganathan Ganesh Babu]

Hi Karthick, 

 

Thanks for contacting Syncfusion support. 

 

Could you please confirm us whether you are getting the element type as “node” while clicking the node inside the swimlane and getting the element type as group after activating the pan Tool? 

 

If yes, please note that while clicking the node inside the swimlane the element’s type is set a group alone which is the default behavior. Please refer the below attached sample in which we have rendered the nodes inside the swimlane. 

 

Sample: 

 

Sample  

 

If we misunderstood your requirement kindly share us more details such as sample with video and exact scenario such as whether you are clicking the node which is inside swimlane or in diagram 

 

Regards, 

 

Naganathan K G 

 

[Karthick]

Hi Naganathan,

Thanks for responding to the query. Please find my response to your questions.

Could you please confirm us whether you are getting the element type as “node” while clicking the node inside the swimlane and getting the element type as group after activating the pan Tool?  

Karthick: As I mentioned in my initial question, element type is node when it is loaded and it gets changed to group after activating pan.

If we misunderstood your requirement kindly share us more details such as sample with video and exact scenario such as whether you are clicking the node which is inside swimlane or in diagram 

Karthick: your understanding about the issue is correct. I am clicking on a node which is inside a swimlane. Please find the sample diagram attached. 

In a nutshell, issue is after activating pan i am not able to achieve the single click on a node inside swimlane. 

Attachment: SwimlaneDiagramSample_b3232766.zip

[Shyam G]

Hi Karthick, 

When you click the node inside a swimlane at initially(before activating Pan) and after activating the pan, the elementType property in click event will be group. Please refer to the video below for your reference. could you please provide us more details such as modify the below sample or video to demonstrate an issue. 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/7z/clicksample-1266702251 

Video: http://www.syncfusion.com/downloads/support/directtrac/general/ze/elementtypevideo315304623 

Regards, 

Shyam G 

[Karthick]

Hi Shyam,

Please find the attached modified sample. I am loading a diagram from the drive which is stored as JSON. Please load the view and click on a box in "Business" lane. You can see that box along with the children boxes getting highlighted to red. Now click on the activate pan. Then click on any of the boxes in "Business". Now you can see the children nodes are not identified since they are changed to group. How can I fix the issue and keep that coloring of children boxes work even after activating pan? please advise.

Thanks,

Karthick

Attachment: SyncfusionMvcApplication2_8803a024.7z

[Shyam G]

Hi Karthick, 

 

When you activate the ZoomPan tool, the pan tool is activated in the diagram and the interaction in nodes and connectors could not be performed. So only the elementType in click event remains the same(group) for every element. please use singleSelect tool along with zoomPan tool as shown in the below code example, so that when you click on the diagram area, the pan tool will be shown and if you click on the diagram objects(nodes and connectors), the interaction could be performed. 

 

Code example: 

 

function ActivatePan() { 

        var diagram = $("#Diagram").ejDiagram("instance"); 

        diagram.update({ 

            tool: ej.datavisualization.Diagram.Tool.SingleSelect | ej.datavisualization.Diagram.Tool.ZoomPan 

        }); 

    } 

 

Please let us know if any concerns. 

 

Regards, 

Shyam G 

[Karthick]

Hi Shyam,

Thanks for your response. I tried your steps but still the single click does not work. Please find the attached sample solution which I tried. Can you please help?

Thanks,

Karthick

Attachment: singleclickwithpan_56a05195.7z

[Shyam G]

Hi Karthick, 

 

We have considered “After activating panTool and click on the node in swimlane, the elementType arguments in click event returns incorrect value” as a defect. The fix for this issue is estimated to be available on volume 4 service pack 1 release which is scheduled to release by the end of December,2017. 

 

Regards, 

Shyam G 

[Shyam G]

Hi Karthick, 

 

Please ignore our previous update. 

 

• When you click the node inside a swimlane, the click event arguments element returns swimlane object,  elementType  returns string as group and actualObject returns selected element(node object). This is a default behavior of our control. Also elementType arguments in click event will be set based on the element arguments. For example: if element arguments returns node object, then elementType will be “node”.
• We have used actualObject arguments for an group nodes. For example: By default, the group node will be selected on the first click of object. if an group node contains 3 children’s and if an selection to be updated for the particular children on the first click, then you will get the selected children in actualObject arguments and you can pass it as parameter in updateSelectedObject method to draw an selection for that children alone. The arguments in click event while clicking node in swimlane will be same as group node but the clicked node will be selected on the first click instead of swimlane object
• In your sample, you have removed the PageEditable diagram constraints from the default diagram constraints. So only both element, actualObject arguments in click event returns the node object, when you click on the node inside a swimlane. So element should return a swimlane object. We have considered “The elementType arguments in click event returns incorrect value while pageEditable constraints is disabled in diagram”  as a defect. The fix for this issue is estimated to be available on volume 4 service pack 1 release which is scheduled to release by the end of December,2017.
• If you need to get an element type, please use diagram getObjectType method in which you can pass the actualObject arguments. please refer to the code example below.

 Code example: 

  function click(args) { 

                 if (diagram.getObjectType(args.actualObject) == "node") { 

                         . . . . 

                  } 

              } 

       

Regards, 

Shyam G 

[Karthick]

Hi Shyam,

Thanks a lot for the update. args.actualObject works for me after activating the pan. 

Thanks,

Karthick

[Shyam G]

Hi Karthick, 

Thanks for your update. 

As promised, the reported issue will be available on volume 4 service pack 1 release which is scheduled to release by the end of December,2017. 

Regards, 

Shyam G