Hierarchical Structure

[rakhee]

Hi,

Is possible to display a hierarchical structure using jsplumb.

Regards,
Rakhee.

[irappa bisanakoppa]

Yes, of course its possible (as per my knowledge). Just place the div's where you want and use anchors property to draw the lines(connectors) between two div's as per your requirement.

--

  Warmest Regards:

 Irappa Bisanakoppa

   Mobile: +91-9880969627

   www.kurios.com.sg

[rakhee]

Hi,
Thanks for your reply., I need to display existing hierarchical data from database in my page. Then i need to edit or add new div''s with existing one's.

[Simon Porritt]

Placing elements and adding/removing them are not jsPlumb concerns.  jsPlumb will just connect elements together for you, wherever they happen to be, and however they got there.  

[rakhee]

Hi simon,

Thanks a lot. One more, Is possible to restrict endpoints and  connection line within a div ? Because, when the div contents overflows the endpoints and  connection line is visible outside the div.

[Simon Porritt]

If I understand your question correctly, I think you need to use a combination of the "container" concept in jsPlumb, and some CSS.  See the docs here:

http://jsplumb.org/doc/content.html#containerDefault

On whichever div you set as the container, you'd just use overflow:hidden to, well, hide the overflow.

[rakhee]

Hi Simon,
Well, i have gone through docs. But if i use the container concept m getting the same as i have mentioned earlier.(I am getting all div dynamically and connecting) Please go through the image files i have attached then u can understand my problem clearly.
1st image= if i make overflow: hidden;
2nd image= overflow: auto;

[Simon Porritt]

You might need to send me a link to your page - I can't really debug from screenshots.

Feel free to send it to my email if you'd prefer not to share it with the whole world.

Simon

[rakhee]

On Wednesday, July 25, 2012 4:06:31 PM UTC+5:30, rakhee wrote:

Hi, Simon,

Please go through which i have attached.

Rakhee

Hi, Simon,

Did you got my problem?

[rakhee]

Hi Simon,


http://jsfiddle.net/Js6Nu/11/

rakhee

[Simon Porritt]

Thanks.

Your divs have position:relative - this does not work with dragging. You need to make your divs absolutely positioned.  

[rakhee]

Thanks.

Hi Simon,

Thanks a lot....its working fine now.

rakhee

[Sonal Ghotavadekar]

Hi Rakhee,

Came across your post today :) What you did long back, I am trying to achieve similar thing

I am facing two issues, my endpoints dont get alligned with the node (actually columns in the table node)

There are 3 columns in each table and I want endpoints for each columns so that i can connect one column from first table to another column on second table.

But when I inspect the elements I see all the 6 endpoints in the <div> for first node (table)

I have attached the screenshot of how UI looks

Thanks

Sonal