dynatree with dynamically created div

[art...@gmail.com]

Hi, Martin!

I was unable to create a tree based on previously created div. The
code I've tried is below (it's ripped out from the context but the
idea is clear). So when I try to get a root node I get an undefined
value. From the other side if I try to tie the tree to an existing div
everything goes just fine. Actually I've only tested this on Safari 3
Mac with dynatree 0.3 rc1.

this.popup = document.createElement('div'); // when I change this to
this.popup = $('#tree').get(0) evrthn's ok
this.popup.id = 'treeselect';
$(this.popup).css({
marginTop: this.select.offsetHeight +'px',
width: (this.select.offsetWidth) +'px',
});

$('#' + this.popup.id).dynatree({
title: "",
rootVisible: true,
autoCollapse: true,
imagePath: Drupal.settings.treeSelect.imagePath,
onSelect: function(dtnode) { ts.onselect(dtnode); },
});

var rootNode = $('#' + this.popup.id).dynatree("getRoot");


P.S. By the way the context of my problem is to create a tree based on
options of a select. CMSs sometimes generate a long selects with
'hierarchical' options inside which are not user-friendly at all. And
when you can only change templates but not the CMS code, the pretty
solution is to use such unobtrusive js.

[mar10]

Does this work: ?
var $popup = $("<div id='treeselect'></
div>").appendTo("body");
$popup.css({
...
});

$popup.dynatree({
title: "",
...
});

[art...@gmail.com]

Thanks! Appending directly to body and using the resulting jquery
object worked for me just fine. Btw I also tested it under Windows IE7
- everything's ok except for a significant slowdown during the tree
generation. Actually I haven't profiled my script yet so I can't say
for sure which operation causes it. I just wonder if someone made
speed tests of dynatree under IE especially programmatic creation of
nodes.
Thanks again for help!

[art...@gmail.com]

I found another issue with putting dynatree in a div. Seems to be a
bug with redrawing the tree after node's expanded:

1. I put dynatree in a div using code you provided.

2. I assign following css to the div:

position: absolute;
z-index: 200;
display: none;
height: 350px;
overflow: auto;
background-color: #ebf7fe;
border: 1px solid #75B2D8;

The key thing is that the div is absolute positioned, fixed height and
scrollable on content overflow.

3. I create the tree, for example:
Node1
Node 1.1
Node 1.2
Node 1.3
Node 1.n
Node 2
Node 2.1
Node 2.2
Node 2.3
Node 2.m

Node 1 has n subnodes, Node 2 has m subnodes. n and m are big enough
to make a vertical scroll bar appear in the div if any of the nodes is
expanded.

4. Let's suppose n > m. I first expand Node 2 and then I expand Node
1. In this case only m subnodes of Node 1 are redrawn (instead of n).
If I scroll down the div content a bit the tree gets redrawn
correctly.

On Nov 6, 9:38 pm, mar10 <moo...@wwwendt.de> wrote: