jqsafi / dynatree Goto Github PK

1. Set bRootVisible=true + bRootCollapsible=false + bSelectExpandsFolder=true
2. click the root folder

It collapses, but should not.

What steps will reproduce the problem?
1. set autoCollapse = true
2. expand a node
3. expand another lazy node 

The first node is not collapsed, leaving us with two open branches.

What steps will reproduce the problem?
1. Create a dyntree
2. do something
3. remove the DIV with the dyntree in it
4. profit :) ... an error is thrown in the JS console


This is fixable by replacing lines 261ff with:

    focus: function() {
//      logMsg("dtnode.focus(): %o", this);
        this.makeVisible();
        try{
        jQuery(this.span).find(">a").focus();}
        catch(x){};
    },

BTW: I took the freadom to also rewrite "$" to jQuery, as in
jQuery.noconflict() $ may or may not be a shortcut to jQuery

Would be happy if this fix gets applied,

Harald

By appending a '#' to the url, it should be possible to select a node.
Possible values:
  * pass a key as defined i nthe node options: { key='123' }
  ...#123
  * pass an id as defined in the <li> tag that was used to define the node:
<id ='123'> ...
  ...#123
  * pass the hierarchical index:
  ...#3.2.1

We have to account for lazy nodes: the target key may not yet be loaded.
Maybe in this case a key-path must be passed so the parents can be loaded
before:
 ...#456/123

What steps will reproduce the problem?
1. Initialize the tree by running the attached script.

What is the expected output? What do you see instead?
I'd expect the tree to be populated with all children. Instead, the tree
contains data only until the "Department" level (e.g. the nodes with "John
Doe", "Joe Sixpack" and so on are not in the tree).

What version of the product are you using?
dynatree-0.3_beta_20080914

On what operating system and browser?
Windows, Firefox 2, IE 7, IE6, Opera 9.27 and Safari 3.1.2.

Refreshing a page should retain the current selection.

For lazy trees this may require re-loading the parent folders.
For better user experience, we should be able to display the selected node
and parent nodes immediately. And the we can use Ajax to load the missing
siblings.
So the cookie must not only contain the selected key, but also title, icon
and keys of the parens.

It should be possible to display no folder/document icon at all.

There should be a way to prevent selection changes.
Use case:
 * The tree is used to select from a list of items.
 * A details-pane shows details of the selected item and allows editing
 * While editing, selection changes should be blocked (or the user should
be asked if he wants to save the changes before the selecion changes).

Possible solution:
a new event 'querySelect', that is generated before the unselect/select
sequence. If 'false' is returned, the selection is not changed.

What steps will reproduce the problem?
1. Just have a look at the examples. All <li> elements are not closed
properly, resulting in an invalid HTML markup.

What is the expected output? What do you see instead?
N/A

What version of the product are you using?
N/A

On what operating system and browser?
N/A

I'd suggest to correct the examples, to avoid possible issues in the future.

We could define, that holding [Ctrl] while clicking, will reload the
children of a lazy node.
It would be nice to echo this behaviour to the user by changing the [+]
symbols of loaded nodes back to the lazy symbol [...] as long as we hold
down the [Control] key.

Function to remove a node (including children).

What steps will reproduce the problem?

1. try to initialize a dynatree with rootVisible:false and keyboard:true
see code below


What is the expected output? What do you see instead?

error: root.aChilds is null


What version of the product are you using?

jquery.dynatree.js 0.3, beta build 2008-09-14 


On what operating system and browser?

MacOsX FF 3

Please provide any additional information below.

Here is the code to replicate the problem:

$("#tree").dynatree({
  title: "Dynatree root", 
  rootVisible: false,                    
  keyboard:true,                        
});

The error occurs on this line:

} else if( root.aChilds.length > 0 && ! (opts.initAjax &&
opts.initAjax.url) ) {


The following change fixed the issue for me

} else if( root.aChilds && root.aChilds.length > 0 && ! (opts.initAjax &&
opts.initAjax.url) ) {

Please add units to all measures.

See 
http://www.learningjquery.com/2007/10/a-plugin-development-pattern
http://docs.jquery.com/UI/Developer_Guide
http://docs.jquery.com/Plugins/Authoring

What steps will reproduce the problem?

1. create a dynatree using <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

What is the expected output? What do you see instead?

The 'T' shaped dotted line images (ltL_nes.gif) do not connect (they have
some vertical spacing in between each one.

What version of the product are you using?

jquery.dynatree.js 0.3, beta build 2008-09-14 


On what operating system and browser?

Mac OSX FF 3 & Safari 3


Please provide any additional information below.

In strict mode images are not treated as inline elements.  The get some
extra margin added to the bottom of them.

Creating a custom style sheet can fix this
(tested in FF, Safari and IE6)

add the following attributes to .ui-dynatree-container img
display: block; /*removes bottom margin from images*/
float: left;    /*makes images display inline*/

and add the following rule
/*clear the float left from above */
div.ui-dynatree-container div div {
    clear:both;
}

Returns the currently selected DynaTreeNode object or null.

Implement thru 
  DynaTree.getSelectedNode()

What steps will reproduce the problem?
1. Run dynatree with jquery.ui.core version 1.6 


What is the expected output? What do you see instead?

nothing is populated to the tree div

What version of the product are you using?

jquery.dynatree.js 0.3, beta build 2008-09-14 

On what operating system and browser?

Mac OsX Firefox 3

Please provide any additional information below.

It looks like there was a change between jquery.ui.core 1.5.2 and 1.6 where
$widget.prototype.init was changed to $widget.prototype._init 

Changing "$.widget("ui.dynatree",{init:function()" to
"$.widget("ui.dynatree",{_init:function()" in the dynatree.js file fixed
the problem for me

Focus shoud be somewhat smarter.
The user should always be able to use the keys (provided, that the tree
itself has the focus), so there should always be exactly on focused node.
The focus must always be on a _visible_ node.

  * on init focus root (or first visible child, if root is hidden)
  * whe the tree container is clicked, or gets focus, make sure that
exactly one node is focused
  * when a node is collapsed, and a child was focused: focus the node
  (see also issue #10)
  * when a folder is clicked to expand: focus it
  * whwn a lazy node was

Collapsing a branch that contains the selected node could 
 * do nothing
 * unselect the node
 * select the parent node

All parents of the currently selected node should have the class
'ui-dynatree-active' added.

Could be used to higlight the parent path using css.

It should be possible to select more than one node.

Clicking a node toggles it's selection status.
A new onUnselect event is required.
The getSelectedNode() function must return an array. And probably should be
renamed.

What steps will reproduce the problem?
1. Include dynatree using another name than the standard "jquery.dynatree.js"
2. Don't use the 'imagePath' option
3. Load an example tree

The tree has no icon images.
This is beecause we guess the path by searching all includes for the
standard name only.
We should match "jquery.dynatree-0.3_beta_20080901.min.js" and others also.

tree.options.cacheLazyNodes = true

Can be set to false, so that collapsing and re-expanding will reload it.

What steps will reproduce the problem?
1. Clicking next to a node, not ON a node

What is the expected output? What do you see instead?
Expected to return null, but raises error " 'null' is null or not an 
object " at line 663 in 'jquery-dynatree.js'

What version of the product are you using? On what operating system and 
browser?
Version 0.3 Beta


Please provide any additional information below.
The solution to this error is to replace line 663 in jquery.dynatree.js :

function fnClick(event) {
    var dtnode = _getNodeFromElement(event.target);
    return dtnode.onClick(event);
}


with this:

function fnClick(event) {
    var dtnode = _getNodeFromElement(event.target);
    if(dtnode != null)
        return dtnode.onClick(event);

    return null;
}

What steps will reproduce the problem?
1. Create a node with something like <li data="{expand: false}"/>


What is the expected output? What do you see instead?
Tree does not work in IE 7

The problem occurs because line 840 of jquery.dynatree.js says:

if( dataAttr[0] != "{" )

This is not legal in IE7, it should be changed to:

 if( dataAttr.charAt(0) != "{" )


This fixes the problem for me.

What should be the value of 'this' in the callback functions?
Could be
 * the <span> element
 * the DynaTreeNode object
 * $(..) wrapped <span> element

Function to remove all child nodes.

Should be combined with the multi select mode, otherwise it is rather an
'Radio-button mode'.

There could be two flavours: 'simple' and 'hierarchical'.

== 'Simple' behaviour ==

A checkbox is displayed in front of the title.

== 'Hierarchical' behaviour: ==

A checkbox is displayed in front of the title.

Selecting a node will also select all child nodes.
Unselecting a node will also unselect all child nodes.

If some, but not all child nodes are selected, then the parent nodes get a
special status 'Partly selected'. Maybe a gray selected checkbox.

What steps will reproduce the problem?
1.
2. Test #4
3.

What is the expected output? What do you see instead?


Please use labels and text to provide additional information.

There should be a way to remove selection.

Currently available solution (using a custom button, for example):
 * tree.getSelectedNode().unselect()

Possible solutions:
 * new tree option 'toggleSelection'. When set, clicking a selected node
will unselect it.
 * new function 'tree.clearSelection()'

What steps will reproduce the problem?
1. Scroll down the page, so that the browser shows a toolbar
2. Collapse a tree node

The browser jumps to the top of the page, even if it is not required to
display the tree.

A new tree.option 'fx' could be used to define jQuery style effects.
This requires that the new child node is rendered as hidden, and then made
visible using jQuery effects.

onFocus() detection is somewhat wacky on IE (not a jQuery style event object).

See, if there is need for improvement, and maybe do some easy optimizations.

This is because we use the id attribute of the node, but some nodes may not
have been rendered yet.
Solutuin:
 - implement find() by traversing the DynaTree, or
 - always render all nodes, and use display:none instead

I'm loading the JQuery/dynatree libraries in the HTML file like so:
<script src="jquery.js" type="text/javascript"></script>
<script src="ui.core.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="skin/ui.dynatree.css" />
<script src="jquery.dynatree.js" type="text/javascript"></script>

I've basically moved the .js files to the same folder as the HTML file.

In Internet Explorer, the paths to the icons become something along the
lines of:
.../jquery.dynatree.j/skin/ltFld.gif

This results in broken images, of course.

In Firefox, however, the paths are correct:
.../skin/ltFld.gif

Besides noticing this issue in my own project, I also reproduced it on
sample-quick.html.

What steps will reproduce the problem?
1. Use down key to change focus
2. press Space

onSelect event is not sent. 

Add some events for easy implementation of drag'n'drop behaviour.

this should work with jQuery.noconflict()

It should be easy to render the tree inside a table with one line per node.

The first column would contain the icons (and optionally a short title).
Additional colums could be appended.

Benefit:
The node information would be aligned and grouped in columns.
Column headers would be possible.
Sortable columns would be possible too, but they would only affect the
siblings of the same branch.

tree.options.expandAlways = false

If set to true, nodes cannot be collapsed.
The icons are rendered accordingly, so that all icons show [-]. 
For the top-level nodes we can even remove the first icon row.

Maybe, it would be more flexible to have a 
  tree.options.nMinExpandLevel = 0
instead. Setting this to 3 would force the top three levels to be always
expanded.

If a node contains a very large number of children, it may be nice to
specify a maximum count of nodes to read and display.

So we could introduce a new status node type 'More...', that could be
clicked to re-trigger a onLazyRead-event.

It is up to the onLazyRead-event handler and the implementation of the Ajax
service to implement the paging. For example by accepting a 'startIndex'
and 'maxCount' argument.

Selecting a node should add this class to the <span> tag.
(And remove it from any previously selected node.

in this case the expected behaviour would be to focus the first top-level node.
If the tree is lazy (e.g. using initUrl) this action must be delayed until
the first node is added,

tree.otpions.autoSelect = false
tree.otpions.autoSelectDelay = 400

If enabled, then a focused node will be automatically selected after 400 ms.
A select event is generated.

This feature would be handy to display a preview / details the current node
in a seperate pane.

http://www.crockford.com/javascript/jsmin.html

 ...

The attribute for node <span> tags should be renamed ('ltn' was for Lazy
Tree Nodes)

Currently it is not so easy to address the selected node via css:
a.ui-dynatree-selected also matches the preceding expand-icon.
Customizing the tree css should be made easy.

Do we need the <a> tags at all?
Should the only the <a> tag containing the title have another this class name?

If I initialize a tree using the following:
$('#tree').dynatree({children:[{title:'Level one',children:[{title:'Level
two',children:[{title:'Level three',children:[{title:'Level four'}]}]}]}]});

I only see the 'Level one' and 'Level two' nodes. The two other nodes are
never added.

Nodes that are either top-level nodes or child nodes to the top-level nodes
appear, but any nodes that are deeper in the tree seem to be lost.