Uncaught TypeError: Cannot read property 'left' of undefined

[yunus khan]

Hi,

I am trying to use jsPlumb in one of my application in which i am getting a data from XML and displaying in the form a tree. basically I have two trees,and I need to draw a line between each node of the tree. So therefore i am using jsPlumb to do so. By selecting the id of each node of a tree i am adding an endpoint.Something like this

jsPlumb.ready(function()  { 

e1 = jsPlumb.addEndpoint("__node3",endpointstyling1);

e2 = jsPlumb.addEndpoint("__node37",endpointstyling2);

});

__node3 and __node 37 are the id's of <li> elements(or nodes) of each tree. 

But i am getting an error saying Uncaught TypeError: Cannot read property 'left' of undefined  and this is referring to 

jquery.jsPlumb-1.3.16-all.js:537 . Its working fine if i give ID's of <div> elements inside which i have constructed a tree but same thing is not applicable for this logic.

Thanking you in anticipation.

[Simon Porritt]

I could only really debug this by looking at the code, because all i can suggest from looking at this is that those elements don't exist...

[yunus khan]

I'm sure they exist. It was working fine when i was using pure Javascript code, but  I am experiencing this error when i moved to jQuery. Or can you suggest me some logic using which i can add Endpoints using to a variable or an object rather than selecting ID's of elements. Variable  Like

var  oNode1=new sap.ui.commons.TreeNode( {text:childnode1, expanded: true});

Here oNode1 is a tree node constructed using SAP UI5 library. And I need to add an endpoint to this particluar node.

[Simon Porritt]

you can pass DOM elements or selectors to the addEndpoint function in jsPlumb. if oNode1 is a DOM element you can pass that in as the argument.

[yunus khan]

Hey,I was able to rectify it. I just had to re write the code without using jquery ready function n it worked. Thanks for your suggestions.

I have another doubt regarding patterning the lines.. wen i drag i line from one endpoint to another its completely straight.I want line to bend 90' completely and then connect to the second end point. Can you suggest some possible way of doing it.

Thanks.

[Simon Porritt]

it depends on the connectors you're using.  only Flowchart connectors will bend 90 degrees, and then only if their anchors are oriented at 90 degrees to each other. like a TopCenter to RightMiddle connection would bend through a right angle, for instance.  but a TopCenter to BottomCenter would not, since the difference between the orientation of their anchors is 180 degrees.

[yunus khan]

Okay. I will try using FlowChart connectors. Thanks. :)

[Simon Porritt]

This demo will give you a feel for how they will behave:

http://jsplumb.org/jquery/flowchartConnectorsDemo.html

[yunus khan]

I have pretty much succeeded in what I wanted to achieve by using flowchartConnectors.  But the point at which it bends is kinda involuntary,it automatically bends depending on your drag direction. Is it by any chance possible to bend the line wherever we want it too.???

[Simon Porritt]

There is a midpoint you can set. Check the docs. But that is all the control you have.