Is there a way to get a reference to the DOM element, by accessing FancytreeNode? I have a work-around which involves something like this:
var el = $('li#ft_' + node.key) but this fails sometimes, even though the ID/element exists. It would be nice to just do: var el = $(node.domElement)

Also: Please add a config option to disallow removal of <a> tag. I have a tree with list items such as <a href="#" data-id="..." data-something="bar">..</a>, but Fancytree only collects the href attribute, and removes the <a> tag completely. How could I get access to the data-* attributes?

Init data:

var operationsData = [{
  "key":"occontrolpanel",
  "title":"Control Panel",
  "folder":true,
  "partial":true,
  "children":[
     {
        "key":"occontrolpanel.home",
        "title":"Home",
        "folder":true,
        "partial":true,
        "children":[
           {
              "key":"occontrolpanel.home.index",
              "title":"View home page",
              "selected":true
           },
           {
              "key":"occontrolpanel.home.stats",
              "title":"View statistics",
              "selected":true
           },
           {
              "key":"occontrolpanel.home.logs",
              "title":"View logs",
              "selected":false
           }
        ]
     }
  ]      
}];

Configuration:

$("#tree").fancytree({
    checkbox: true,
    selectMode: 3,
    activeVisible: true,
    clickFolderMode: 3,
    source: operationsData
});

How it looks:

How it should look:

Now only MIT (no longer GPL2).
Also the link is misspelled (infe) and wrong:

• Copyright (c) 2012, Martin Wendt (http://wwWendt.de)
• Dual licensed under the MIT or GPL Version 2 licenses.
• http://code.google.com/p/fancytree/wiki/LicenseInfe

Discuss and finalize this RFC:

https://github.com/mar10/fancytree/wiki/SpecFilter

Currently the filter extension dimms or hides nodes that do not match a certain pattern or condition,
If we want to display only a certain node and all its descendants, we would have to call tree.applyFilter(filter) with a callback that returns true for that node and all its children.

This can be simplified by a new method tree.filterBranches(filter), which could be implemented more efficiently.

Maybe we should also rename tree.applyFilter(filter) to tree.filterNodes(filter)

Discuss and finalize this RFC:

https://github.com/mar10/fancytree/wiki/SpecExtensions

How do make fancyTree not display anything in the console?

The issue is that the beforeSelect, and Select events will fire with each node selection. Picture clicking on the parent of three children, it will cause three selection events to fire. I need a way to identify when the entire process is complete. Essentially a PostOperations event indicating all previous events are complete.

Many examples use .visit(), which raises events at a node level. This causes issues in cases where you only want to fire a chained procedure after the .visit() is complete.

So far the best candidate is the focus event since it only fires once after the select event. However, I was forced to modify the source code and comment out the check that prevents the focus event from firing if it is already in focus.

         nodeSetFocus: function(ctx, flag) {}
               if(tree.focusNode === node && flag){
                    node.debug("nodeSetFocus(" + flag + "): nothing to do");
                  return;

I don't like modifying the source code. Am I missing another event that fires after the Select event finishes?

Discuss and finalize this RFC:

https://github.com/mar10/fancytree/wiki/SpecSelect

e.g. 'blurtree' -> 'blurTree', ...

When calling activateKey for a node that has not yet been loaded lazily, nothing happens as getNodeByKey doesn't find a node. Could a new feature be added that in this case Fancytree will make a lazy load operation to fetch the missing tree branch? If the convention will be to return a node source with all ancestor nodes and their siblings, the missing branch could added to the tree.

Is it currently possible to mark certain nodes initially selected in UL markup? The examples do not give any hint this would be possible, neither the code. I did also try <li data-selected="true"> but that trial did not work... ;) Maybe it could?

When you add the filter extension to a fancytree with table extension, the filtered elements are not correctly hidden.
You can change the jquery.fencytree.filter.js adding:

if(opts.filter.mode === "hide"){
var visible = !!(node.match || node.subMatch);
node.debug(node.title + ": visible=" + visible);
$(node.li).toggle(visible);
if ($(node.tr)!=null) {
$(node.tr).toggle(visible);
}
}

to fix the problem.

Hi,

it could be useful for people that can't change what it comes from the server and want to avoid a extra step to create the data array.

I could try to do that if there is any interest.

e.g.

{ 
  keyPath: "id",
  titlePath: "label",
  childrenPath: "nodes"
}

e.g.
ryrych/rcarousel#16
or

When you define a widget with the $.widget("namespace.widgetname") syntax, the widget factory instantiates the widget "class" inside $[ namespace ]. All jQuery UI widgets exist in the $.ui namespace, which is reserved for official widgets, so make sure you change this to something unique. Namespaces are used internally for organizational purposes; they do not allow you to create multiple widgets with the same name.

This could be a nice format for source code examples (like the sample-extension):
http://jashkenas.github.io/docco/

Hello, for dyna tree there was some indication that expand and collapse all are possible for lazy loaded tree using onLazyRead. This seems to be missing in the new fancytree. Is there some way to get this function back up?

Thank you

In dynatree, there was some example that uses initAjax and postInit to call data from the server.

First of all, is this possible with just json calls? ( I am using ruby so my data is passed around in json)

since initAjax was changed to source, my source is a list of roots so how would I auto reactivate the children nodes? Is there some new functions available for this option? Any hints would be appreciated!

How would you hide the file and folder images from showing in the treetable? Also, when I try to show only the checkboxes and names only, I cannot only have 1 header and and one row... I need to have a secondary header and row to display one column which I find weird.

dynatree.js had the following in the "appendAjax" function:

else if (data && data.hasOwnProperty("d")) {
data = (typeof data.d) == "string" ? $.parseJSON(data.d) : data.d;
}

It would be extremely useful to have this back in fancytree please to cater for asp.net webmethod json function returns.

Hello,

I got strange error message. When I scroll vertical scroll bar of fancytree widget I got error message "ERROR?: helper requested but sourceNode not found."
In source code it says:
jquery.fancytree-all.js
line: 3877
if(!sourceNode){ // issue 211
// TODO: remove this hint, when we understand when it happens
return "

Please, check attached file.

Thanks,
Yernar

In Dynatree there was an "unselectable" property that prevented selection:

{"key":"4","title":"Sub-item 4.4 (unselectable)", "unselectable":true }

The demo page shows an example that allows these nodes to be clicked:
http://wwwendt.de/tech/fancytree/demo/

I modified the selectable demo to illustrate this more cleanly. In the demo below clicking the parent folder in selectMode 3 resulted in the unselectable node being selected.

Example: Selection and checkbox

<!-- Tree #1 -->

<p class="description">
    This tree has <b>checkoxes and selectMode 1 (single-selection)</b> enabled.<br>
    A double-click handler selects a <i>document</i> node (not folders).<br>
    A keydown handler selects on [space].<br>
    The <code>checkbox</code> icons are replaced by radio buttons by adding
    the 'fancytree-radio' class to the container.<br>
    Note: the initialization data contains multiple selected nodes. This is
    considered bad input data and <b>not</b> fixed automatically (only on
    the first click).
</p>
<div>
    <label for="skinswitcher">Skin:</label> <select id="skinswitcher"></select>
</div>
<div id="tree1" class="fancytree-radio">
</div>
<div>Active node: <span id="echoActive1">-</span></div>
<div>Selection: <span id="echoSelection1">-</span></div>


<!-- Tree #2 -->

<p class="description">
    This tree has <b>selectMode 2 (multi-selection)</b> enabled.<br>
    A single-click handler selects the node.<br>
    A keydown handler selects on [space].
</p>
<p>
    <a href="#" id="btnSelectAll">Select all</a> -
    <a href="#" id="btnDeselectAll">Deselect all</a> -
    <a href="#" id="btnToggleSelect">Toggle select</a>
</p>
<div id="tree2"></div>
<div>Selected keys: <span id="echoSelection2">-</span></div>


<!-- Tree #3 -->

<p class="description">
    This tree has <b>checkoxes and selectMode 3 (hierarchical multi-selection)</b> enabled.<br>
    A double-click handler selects the node.<br>
    A keydown handler selects on [space].
</p>
<div id="tree3"></div>
<div>Selected keys: <span id="echoSelection3">-</span></div>
<div>Selected root keys: <span id="echoSelectionRootKeys3">-</span></div>
<div>Selected root nodes: <span id="echoSelectionRoots3">-</span></div>


<!-- Tree #4 -->

<p class="description">
    This tree has selectMode 2 (multi-selection) enabled, but <b>no checkboxes</b>.<br>
    A single-click handler selects the node.<br>
    A keydown handler selects on [space].<br>
    A double-click handler expands documents.<br>
    A onQuerySelect handler prevents selection of folders.
</p>
<div id="tree4"></div>
<div>Selected keys: <span id="echoSelection4">-</span></div>


<!-- Start_Exclude: This block is not part of the sample code -->
<hr>
<p class="sample-links  no_code">
    <a class="hideInsideFS" href="https://github.com/mar10/fancytree">jquery.fancytree.js project home</a>
    <a class="hideOutsideFS" href="#">Link to this page</a>
    <a class="hideInsideFS" href="index.html">Example Browser</a>
    <a href="#" id="codeExample">View source code</a>
</p>
<pre id="sourceCode" class="prettyprint" style="display:none"></pre>
<!-- End_Exclude -->

When clicking on a node (not first one) of an unfocused tree with a mouse the first tree node gets focused, and the node being clicked gets active status. Expected only the node being clicked to receive focus/active status.

Under debugger it seems to work as intended. Seems to be some timing/racing problem.

firefox 20
fancytree 2.0.0pre, commit bee0c40
extensions: themeroller

I see on the dynacode examples there is a onDblclick configure option, what is the new configure name for this callback?

Thanks!

Could you be able to fix the lazy load part of the persistence example to show its children? right now it is toggled without showing any children. I tried out the load key but can't get it to work...

the hideCheckbox property set accordingly for disabled items on my ajax JSON response but the checkboxes are still showing up.

This used to work in dynatree fine. You can see its not working in your demo at.
http://wwwendt.de/tech/fancytree/demo/sample-select.html

e.g. 'selected on init' items are not selected

Hi there!

Any chance we can get a working dnd extension with more recent jquery and jquery ui libs? It doesn't work with jquery 2.0.0 and jquery ui 1.10.3.

Thanks,
cheers singultus

PS: really great tree library!

The common part of all skin css files should be identical at the head.
Also check, if less would be an improvement

if I put the extension "dnd", how to make a element no draggable,
tks

During the usage of fancytree table with fancy tree filter, the filter style is not correctly apply (because in the fancytree css style look for a span element).

To fix the problem you can just add:

/* filter for table */
.fancytree-ext-filter tr.fancytree-node .fancytree-title {
color: silver;
font-weight: lighter;
}
.fancytree-ext-filter tr.fancytree-node.fancytree-submatch .fancytree-title {
color: black;
font-weight: normal;
}
.fancytree-ext-filter tr.fancytree-node.fancytree-match .fancytree-title {
color: black;
font-weight: bold;
}

to the ui.fancytree.css

at least in ext-table with Win8 skin

Doing the same operation, ie clicking the expand icon of a folder, results in different browser responses. Sometimes it processes the Javascript and then shows the completely rendered nodes immediately when the Javascript finishes.

Other times, the exact same: data, expander, browser, and code, can cause a browser hang (presumably a reflow/repaint).

The confusing part is that this comes and goes with no real pattern. Hitting ctrl-F4 on the same tab and doing the same operations results in two different outcomes.

When the browser is frozen (use the 10K node sample), it can stay frozen for longer than 10 seconds. Two indicators make the browser hang easy to spot:

1. The rightmost scrollbar does not re-size to show the new length of the page. It does after the 10 second hang is over.
2. Sometimes the node level icons will not render, so just the text of the nodes is visible. Again, goes away after the hang finishes.

Example of problem (when scroll has not rendered):

Example of after the hang is done. Ie what the page should look like:

Browsers Un-Affected:
IE 9-10
Chrome

Browsers Affected:
Firefox

looks like

or

should be:

Allow the option to create nodes faster. Creating an issue to track the various ways to speed up the rendering of 10,000 node children within a single folder.

I created a sample and will upload it. Essentially, it adds an option "renderNodeEvents" that the user can set to FALSE. By disabling these two event calls the speed increases dramatically.

My proposed code changes have the following benchmark scores in Firefox:

Original: 5091 ms
Proposed: 1650 ms
i.e. 68% faster

Before closing this issue, I would like to have a discussion about how the nodeRender: function() works. I originally tried to improve the generation by modifying this method. I feel like there is a way to use Document Fragments to speedup the generation. I wasn't 100% sure that the current method adds the entire tree to the DOM in one addition (ie if the deep=true). It seems like it might add each completed LI to the DOM (which could happen several times).

Three references:
http://ejohn.org/blog/dom-documentfragments/
https://developers.google.com/speed/articles/javascript-dom
http://jsperf.com/documentfragmentui

We attach the FancytreeNode instance as property of the node's span element.
This may cause resource leaks
(http://javascript.crockford.com/memory/leak.html, ...)

We should verify if this is a potential problem and if so, fix it

Please, move all strings visible to users to an object in initialization options, so others could translate them to their language if they want to.

jQuery style guide demands jshint option
"onevar": false,
(http://contribute.jquery.org/style-guide/js/)

Discuss and finalize this RFC:

https://github.com/mar10/fancytree/wiki/SpecAria

Hi I use a tree to assign categories to e.g. books. Now if I have categories like:
Science
-- Botany
-- Chemistry

I like to have the parent selected as soon as I select one of the children as every botany book is a science book but not vice versa. Not every science book is a botany and chemistry book.

This issue occurs with the newest FancyTree version (as well as older ones I've tried) and does not seem to depend on the jQuery version.

Steps to reproduce

1. Open this JS Bin link in IE8 (here's a Gist if you don't like JS Bin). Note: This issue does not occur when using a newer IE in IE8 mode — you have to use real IE8.
2. Type something in the text field and try pressing Backspace. It should work.
3. Click any of the FancyTree nodes (Node 1, for instance) to activate it.
4. Try deleting some of the text in the text field by pressing Backspace. It doesn't work.

Something that may help point you in the right direction: I tried commenting out l. 3034 of jquery.fancytree.js and that seems to fix the backspace issue without preventing the node from being activated, but it probably does something else important I didn't get to yet.

The console is of no help, unfortunately, since IE8 doesn't have one.

Does filter function work with lazytree function?

e.g.
https://github.com/blueimp/jQuery-File-Upload/blob/master/js/jquery.fileupload.js
see also
http://wiki.jqueryui.com/w/page/66995889/AMD-Support
http://marijnhaverbeke.nl/acorn/
http://gregfranko.com/blog/registering-the-jqueryui-widget-factory-as-an-amd-module/

because of

http://jqueryui.com/upgrade-guide/1.9/#deprecated-offset-option-merged-into-my-and-at

my config:

$("#pages-tree").fancytree(
{
debugLevel: 0,
...

Discuss and finalize this RFC:

https://github.com/mar10/fancytree/wiki/SpecPersistence

Discuss and finalize this RFC:

https://github.com/mar10/fancytree/wiki/SpecMarkup

I'm loading my tree via ajax json call (5K nodes)
If I attempt to activateKey in JS right after creating fancytree call, the nodes have not finished loading yet and activateKey fails (I log the count() before the activateKey call).
If I attempt to activateKey in a setTimeout, still fails. I've tried 1-5 sec to no avail.

If I make same exact call in Chrome Console, the node activates perfectly.
So I'm really not sure what is going on.

Ideally, it would be nice if there was an event handler on the tree object once everything had finished that you can safely call a node activation.

Thanks for your time!