Fancytree - JavaScript tree view / tree grid plugin with support for keyboard, inline editing, filtering, checkboxes, drag'n'drop, and lazy loading

Last update: Jan 9, 2023

Overview

Fancytree

Fancytree (sequel of DynaTree 1.x) is a JavaScript tree view / tree grid plugin with support for keyboard, inline editing, filtering, checkboxes, drag'n'drop, and lazy loading.

Status

See the change log for details.

Get Started

Try the live demo.
Read the documentation.
Check the Q&A forum or Stackoverflow if you have questions.
Play with jsFiddle, CodePen, or Plunker.
Contribute

ES6 Quickstart

import $ from "jquery";

import 'jquery.fancytree/dist/skin-lion/ui.fancytree.less';  // CSS or LESS

import {createTree} from 'jquery.fancytree';

import 'jquery.fancytree/dist/modules/jquery.fancytree.edit';
import 'jquery.fancytree/dist/modules/jquery.fancytree.filter';

const tree = createTree('#tree', {
  extensions: ['edit', 'filter'],
  source: {...},
  ...
});
// Note: Loading and initialization may be asynchronous, so the nodes may not be accessible yet.

See module loader support and API docs.

Credits

Thanks to all contributors.

Comments

Keyboard and ARIA accessibility of tree grid
While the accessibility of a normal tree is in very good shape, the treegrid is a little bit of a problem for screen reader users (although it has a great start).

The treegrid only puts focus on the first cell of each column. This means that as the user navigates up and down between rows, the user only hears the information in the first column, and it isn't even necessarily clear that there are other columns. Solving this is not necessarily simple.

I don't think there have necessarily been a lot of great accessible treegrid widgets made in the past, so we are breaking a little ground here. This may take a couple of rounds and testing with some users to get it right. I can help with the testing and ARIA recommendations, etc.

What do you think about having a separate row navigation mode and column navigation mode?

Row navigation mode:

When pressing up/down, the user should move into row navigation mode. In this mode, focus/aria-activedescendant should go on the row, so that the entire row is read aloud. These are the role="row" items.

aria-level, aria-setsize and aria-posinset should be set on the row so the screen reader user hears correctly the information "Level 3, item 2 of 7" etc.

Column navigation mode:

When pressing ctrl+left/ctrl+right (cmd left/right on mac) the user will move left/right by cells but restricted to the current row. These are the role="gridcell items"

Other:

No aria-labelledby is necessary, because when there is no aria-labelledby/aria-label, the child text content is used by default. Note: this is true for "tree" mode as well.

In a treegrid, no role="treeitem" elements are necessary -- just the rows and cells

On each row (also on treeitem in a tree), aria-expanded should be set to "true" or "false" on parent nodes. This attribute should be removed for leaf nodes. Therefore it's really a tristate attribute. Setting it to false indicates that the node is expandable, whereas leaving it off indicates that the node is not expandable.

The aria-selected attribute is another tristate (true|false|undefined). On each row, aria-selected should be set only if and only if the node is selectable. If checkboxes/selection are not available, it should be removed. Mixed checkboxes can be defined as such by using aria-checked="mixed".

The aria-owns may need to be set, but I need to look at what different browsers are doing with this , and it may be harmful

enhancement ext-table need-spec aria stale
opened by aleventhal 47
Fix issue #228

Fix issue from request #228 that click events were not working when HTML code was embedding in a title. Also fixed CI build errors from original request.

opened by markbernard 18
BUG : URGENT : release v2.26.0 is broken with requireJs
I was using v2.240 with requriejs before and today I updated it to v2.26.0 and now everything is broken. I investigated a little bit and found the following issues

First Topic : Existing UMB BLOCK:

Very first issue is with /dist/jquery.fancytree-all.js UMD Block

instead of define( [ "jquery", "./jquery.fancytree.ui-deps" ], factory );
it should be define( [ "jquery", "`jquery.fancytree-all-deps" ], factory );

jquery.fancytree-all-deps without ./ , because of ./ it tries to resolve path relative to index.html which is wrong

name should be jquery.fancytree-all-deps instead of jquery.fancytree.ui-deps for /dist/jquery.fancytree-all.js after compilation. jquery.fancytree-all should depend on jquery.fancytree-all-deps not on ./jquery.fancytree.ui-deps Some Notes: UMD uses word "jquery" without any ./ because it is assumed to be defined variable by AMD always. Therefore this should be proper setup IMO

// fancytree UMD block line change define( [ "jquery", "`jquery.fancytree-all-deps" ], factory ); // //AMD setup requirejs.config({ paths: { 'jquery': './js/vendor/jquery', 'jquery.fancytree': './js/vendor/jquery.fancytree-all', 'jquery.fancytree-all-deps' : './js/vendor/jquery.fancytree-all-deps', } });

2nd Topic : Resolving jquery-ui Dependency:

Even though I pointed out some changes above , I do not agree with existing UMD block setup. jquery ui documentation is very clear on how to use it with amd. see here please

Some people tend to use jquery-ui-all.js (custom or all bundled in one file) with AMD which is wrong, of course it is a work around but this is against very soul of AMD usage andjquery ui documentation suggests that one should use directory structure of it instead of jquery-ui-all.js when working with AMD

├── index.html ├── js │ ├── app.js │ ├── jquery-ui │ │ ├── accordion.js │ │ ├── autocomplete.js │ │ ├── button.js │ │ ├── core.js │ │ ├── datepicker.js │ │ ├── dialog.js │ │ └── ... │ ├── jquery.js │ └── require.js

Fancytree should never bundle dependencies because

It is extra maintenance

It is against repo and AMD rules. There is a reason we have github , npmjs and JSMP Repos, they are there to resolve dependencies. Why repeat same work again ?

Correct Usage:

As per jquery ui documentation, following would be the correct setup.

Note: I was using same while using 2.24 and it was working perfectly but I was doing this manually

UMD BLOCK

define(['jquery', 'jquery-ui/core', 'jquery-ui/effect', 'jquery-ui/effects/effect-blind', 'jquery-ui/widgets/draggable', 'jquery-ui/widgets/droppable'], factory );

Full UMD BLOCK:

;(function( factory ) { if ( typeof define === "function" && define.amd ) { // AMD. Register as an anonymous module. define(['jquery', 'jquery-ui/core', 'jquery-ui/effect', 'jquery-ui/effects/effect-blind', 'jquery-ui/widgets/draggable', 'jquery-ui/widgets/droppable'], factory ); } else if ( typeof module === "object" && module.exports ) { // Node/CommonJS require("jquery.fancytree.ui-deps"); module.exports = factory(require("jquery")); } else { // Browser globals factory( jQuery ); } }( function( $ ) { //

AMD SETUP:

requirejs.config({ paths: { 'jquery': './js/vendor/jquery', 'jquery-ui': './js/vendor/jquery-ui', 'jquery.fancytree': './js/vendor/jquery.fancytree-all' } });
waiting build-process
opened by mafar 17
Backspace doesn't work in input fields when a Fancytree with tabbable = false is active
How to reproduce

jsFiddle to demonstrate: http://jsfiddle.net/688Vy/5/

NOTE: tabbable: false doesn't work with 'table' extension. But if you manually remove tabIndex attribute, you can reproduce this bug with 'table' extension too.

How to fix

I think it's wrong to bind keydown event to the document in _bind method. It's a great overhead in any case. You have to bind tree.$container instead. In order to tree.$container can get focus you can insert any DOM element with tabIndex="0" and style="width:0;height:0" inside the $container. I experimented with 'table' extension, it's enough to add the second empty 'tbody' element with tabIndex="0":

<table> <thead><tr><th/><th/><tr></thread> <tbody><tbody>  <tbody tabindex="0"></tbody>  </table>

This trick should work with the "classic" tree presentation too (you can insert any div with style="width:0;height:0"). Also in this case no need to check !tree.hasFocus() in the 'keydown' handler:

tree.$container.bind("keydown" + ns, function(event){ // some code // WAS: if(opts.disabled || opts.keyboard === false || !tree.hasFocus()) { if(opts.disabled || opts.keyboard === false) { return true; } // other code });
bug
opened by Koloto 17
Drag n drop multiple Nodes and folder

Hello, How can I activate dragging of multiple nodes. was it not supposed to be a feature in fancytree ? This feature is provided in Jstree and works well within and between different trees. Am I missing example somewhere ?
enhancement ext-dnd

opened by mafar 16
jquery.fancytree-all-deps.min.js fails to load with require.js
Copied from #694: I use version 2.18 with following requireJs configuration (I removed another lines for brevity) and it works

paths: { jqueryUI: 'jQueryUI/jquery-ui-1.11.4.min', fancyTree: 'fancytree/jquery.fancytree.min' } shim: { "jqueryUI": { deps: ["jquery"], exports: "$" }, "fancyTree": { deps: ["jqueryUI"], exports: "$.ui.fancytree" }, }

As I'm not using directly jQueryUI so I tried to utilize new jquery.fancytree-all-deps.min.js from v2.24 with following configuration to remove this dependency

paths: { fancyTree: 'fancytree/jquery.fancytree-all-deps.min' } shim: { "fancyTree": { exports: "$.ui.fancytree" }, }

but it fails with Uncaught Error: Fancytree assertion failed: Fancytree requires jQuery UI
bug build-process
opened by sergevic 15
In electron: jquery.fancytree-all-deps.min.js fails to load with require()

Hi, using the nodejs electron app framework, I experience the same problem. I was first using fancytree-all-deps within a linux dev environment, and it worked, by doing require() on (in that order) jquery, jquery-ui and then jquery.fancytree.

I now moved my dev environment on a Mac, but I cannot load jquery.fancytree-all-deps (or jquery.fancytree-all) anymore. When doing a require('...jquery.fancytree-all'), the package is found, but an exception:

Uncaught Error: Cannot find module 'jquery.fancytree.ui-deps'

is thown.

How to get around this exception ? Is there a description somewhere of what should be the abstract all sequence of action to respect. How should I proceed to propose a solution, can you provide hints, I can troubleshoot the problem, and try to propose a solution. For now, I try to add some changes to the jquery.fancytree-all-deps.js file but its to attempt to load itself. I could extract the minimal use case if needed.

Thx in advance.
bug build-process

opened by allavoie 14
Problem with too long labels

Hi,

we are using fancytree 2.2.0 for one of our project, it displays list of elements, the "problem" is that the label is displayed on one line and in case the label is very long, an horizontal scroll is displayed.

It is not a big issue but we managed to correct this by changing :

/* instead of 'no-wrap' */ ul.ui-fancytree.fancytree-container { white-space: normal; } span.fancytree-node { display: flex; }

The problem is the use of "display:flex" that does not work on older browsers... With IE8, here is the result :

So I do not know if it is an issue to you, and if so, is there a way to correct this so it works also with older browsers?

Thank you!

Gauthier
css stale

opened by gbastien 14
tree key navigation

key navigation doesn't work well in IE-8 its seems that the tree always got focus therfore keypress cause the tree to act. even when im outside the tree. in FF3.5 the key navigation almost never works.even when tree has focus
bug waiting browser-IE

opened by amit034 14
Major scaling/performance issues with node.addChildren()
Expected and actual behavior

Expected: fast performance when using node.addChildren() Actual: performance degrades drastically as the tree fills up. In the case of the automation inspector I'm writing, where I'm using the tree grid for a log that has grouped log items, first the app begins to take 3+ seconds to responds and ultimately rejects user input.

Steps to reproduce the problem

Create a tree with many nodes, 2 levels deep. Add 500 top level nodes, each with 500 child nodes.

Add a child to the root

Environment

Browser type and version: Chrome latest

jQuery and jQuery UI versions: 3.1.1 and 1.12.1

Fancytree version: 2.21.0 enabled/affected extensions: Also using filter and table extensions.

What I learned in debugging the problem

First, thank you for such a great library. The ARIA and accessibility feature are especially important to us at Google. I'm using this to develop a Chrome automation API inspector app. You can see it here: https://github.com/aleventhal/automation-inspector

Here are my observations:

The class attribute is rewritten to nodes that have not changed. In my experience, even though it is counterintuitive, this affects performance more than checking to see if the class needs to be rewritten before doing so. I'm not sure how much of a difference it would make but I believe it would help. I haven't tried to implement this.

Moreover, every time a node is added to the root, the entire tree is re-rendered. This does not seem necessary. Why not just render the new children? This is probably not the exact right change but it really helped solve my performance issue by a huge amount:

Old code (line 441 of jquery.fancytree.js in addChildren() )

if( !this.parent || this.parent.ul || this.tr ){ // render if the parent was rendered (or this is a root node) this.render(); }

New code:

// --- Begin performance improvement change --- if (!this.parent) { // Fast path -- don't render every child of root, just the new ones! for(i=0, l=nodeList.length; i<l; i++) { nodeList[i].render(); } } else if( this.parent.ul || this.tr ){ // render if the parent was rendered (or this is a root node) this.render(); } // --- End performance improvement change ---
enhancement patch ext-table performance
opened by aleventhal 12
Events for node changed, children changed, tree changed

Not sure if this the right channel to request features, but I think three events are missing: when a node is changed when children for a node is changed when any tree node changed

Thanks for the awesome utility.
enhancement

opened by jameswu1818 12
filter/search: prevent node from expanding

How to make node not expand? There's no match in children! Mind you, filterNodes won't do, because I cant expand the node, and I need to

Actual result:

Expected result:

Options:

opened by ildar-shaymukhametov 0
Bump qs from 6.10.1 to 6.11.0
Bumps qs from 6.10.1 to 6.11.0.

Changelog

Sourced from qs's changelog.

6.11.0

[New] [Fix] stringify: revert 0e903c0; add commaRoundTrip option (#442)

[readme] fix version badge

6.10.5

[Fix] stringify: with arrayFormat: comma, properly include an explicit [] on a single-item array (#434)

6.10.4

[Fix] stringify: with arrayFormat: comma, include an explicit [] on a single-item array (#441)

[meta] use npmignore to autogenerate an npmignore file

[Dev Deps] update eslint, @ljharb/eslint-config, aud, has-symbol, object-inspect, tape

6.10.3

[Fix] parse: ignore __proto__ keys (#428)

[Robustness] stringify: avoid relying on a global undefined (#427)

[actions] reuse common workflows

[Dev Deps] update eslint, @ljharb/eslint-config, object-inspect, tape

6.10.2

[Fix] stringify: actually fix cyclic references (#426)

[Fix] stringify: avoid encoding arrayformat comma when encodeValuesOnly = true (#424)

[readme] remove travis badge; add github actions/codecov badges; update URLs

[Docs] add note and links for coercing primitive values (#408)

[actions] update codecov uploader

[actions] update workflows

[Tests] clean up stringify tests slightly

[Dev Deps] update eslint, @ljharb/eslint-config, aud, object-inspect, safe-publish-latest, tape

Commits

56763c1 v6.11.0

ddd3e29 [readme] fix version badge

c313472 [New] [Fix] stringify: revert 0e903c0; add commaRoundTrip option

95bc018 v6.10.5

0e903c0 [Fix] stringify: with arrayFormat: comma, properly include an explicit `[...

ba9703c v6.10.4

4e44019 [Fix] stringify: with arrayFormat: comma, include an explicit [] on a s...

113b990 [Dev Deps] update object-inspect

c77f38f [Dev Deps] update eslint, @ljharb/eslint-config, aud, has-symbol, tape

2cf45b2 [meta] use npmignore to autogenerate an npmignore file

Additional commits viewable in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

@dependabot use these labels will set the current labels as the default for future PRs for this repo and language

@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language

@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language

@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

dependencies
opened by dependabot[bot] 0
Bump minimatch from 3.0.4 to 3.0.8
Bumps minimatch from 3.0.4 to 3.0.8.

Commits

782c264 3.0.8

6ade2da fix: trim pattern

a6f52b0 3.0.7

e4cd434 fix: treat nocase:true as always having magic

e6bbe1c publishConfig for 3.0

5b7cd33 3.0.6

20b4b56 [fix] revert all breaking syntax changes

2ff0388 document, expose, and test 'partial:true' option

5dbd6a7 ci: tests and makework

dbda065 full test coverage, adding tests, deleting dead code

Additional commits viewable in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

@dependabot use these labels will set the current labels as the default for future PRs for this repo and language

@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language

@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language

@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.
opened by dependabot[bot] 0
Bump minimatch from 3.0.4 to 3.0.8
Bumps minimatch from 3.0.4 to 3.0.8.

Commits

782c264 3.0.8

6ade2da fix: trim pattern

a6f52b0 3.0.7

e4cd434 fix: treat nocase:true as always having magic

e6bbe1c publishConfig for 3.0

5b7cd33 3.0.6

20b4b56 [fix] revert all breaking syntax changes

2ff0388 document, expose, and test 'partial:true' option

5dbd6a7 ci: tests and makework

dbda065 full test coverage, adding tests, deleting dead code

Additional commits viewable in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

@dependabot use these labels will set the current labels as the default for future PRs for this repo and language

@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language

@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language

@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

dependencies
opened by dependabot[bot] 0

Releases(v2.38.2)

v2.38.2(Jun 30, 2022)

Release 2.38.2 Commit details.
Source code(tar.gz)
Source code(zip)
v2.38.1(Jan 14, 2022)
Release 2.38.1

Replace deprecated jQuery functions: $.isArray(), $.isFunction(), $.trim(), $().click()

Update to jQuery 3.6.0 and jQuery UI 1.13.0

Update formatter to Prettier 2.0

Commit details.
Source code(tar.gz)
Source code(zip)
v2.38.0(Feb 9, 2021)
[Added] #1041 Make assertions more debuggable

[Added] #1051 ext-filter Fuzzy matched title segment is not highlighted

[Added] #1053 ext-dnd5 new option dnd5.sourceCopyHook (optional callback passed to toDict on dragStart)

[Added] #1054 ext-filter tree.updateFilter()

[Fixed] #700 ext-filter Doing fuzzy filtering doesn't escape regex characters like the non fuzzy case

[Fixed] #1042 Don't scroll while clicking an embedded link

[Fixed] #1045 re-init exception (grid-ext)

Commit details.
Source code(tar.gz)
Source code(zip)
v2.37.0(Sep 11, 2020)
[Changed] #871, #1032 ext-glyph:

Support for SVG tags as used by fontawesome 5 with all.js library

Improved padding and alignment for skin-awesome icons

Allow to pass a callback() as glyph.map<TYPE> option

Update Fontwesome demos to v5.0.13

[Changed] #1025 ext-dnd5: changed behavior when dndOpts.multiSource is true. Now dragging an unselected node will only drag that single node (while keeping the other nodes selected). You have to drag one of the selected nodes in order to drag the whole group.

[Fixed] #1022 ext-persist: Handle 'Access is denied for this document'

[Fixed] #1028 Uncaught TypeError: apply is not a function (regression of #1019)

[Fixed] #1029 Fast expand/collapse of folder leads to inconsistent state

Commit details.
Source code(tar.gz)
Source code(zip)
v2.36.1(Jul 25, 2020)
[Fixed] #1021 ext-dnd5 Regression in drop marker

Commit details.
Source code(tar.gz)
Source code(zip)
v2.36.0(Jul 15, 2020)
[Changed] #1005 Cast key to string in getNodeByKey()

[Changed] #1013 ext-dnd5: log warning when jQuery is too old

[Added] #1012 dnd5.dropMarkerParent allows usage in Webcomponents (i.e. shadow DOM)

[Added] #1017 copyFunctionsToData allows also copying functions to the data property of the node

[Fixed] #921 ext-edit / focus handling: Internet Explorer scrolls briefly to the top/left after editing if the tree container is partially outside the viewport

[Fixed] #1001 Invalid urls in skin-xp CSS

[Fixed] ext-dnd5: dropEffectCallback=none was not reset in some cases

[Fixed] #1018 ContextMenu extension always focuses the first node in the tree

Commit details.
Source code(tar.gz)
Source code(zip)
v2.35.0(Mar 27, 2020)
[Changed] The enableAspx option will default to 'false' in the future. For now, a warning is emitted, to explicitly set it or use the postProcess event instead.

[Added] #988 New option dnd5.preventLazyParents prevents dropping items on unloaded lazy nodes (defaults to true)

[Fixed] #983 lazyLoad with promise not calling postProcess

[Fixed] #984 ext-edit: Exception when cancelling addSibling() or addChildren()

[Fixed] #987 Lazy load puts "Load error" for content outside tree div if parent folder is removed before loads ends

[Fixed] #989 node.toDict() keeps empty children array

[Fixed] #998 dnd5 triggering multiple loads of lazy nodes on hover

Commit details.
Source code(tar.gz)
Source code(zip)
v2.34.0(Dec 26, 2019)
[DEPRECATED] jQuery UI widget methods: Use tree.METHOD() instead of $().fancytree("METHOD").

[Added] tree.debugTime(), tree.debugTimeEnd() for debugging.

[Added] tree.destroy() as alternative for tree.widget.destroy().

[Fixed] $.ui.fancytree.getTree() for Element arg.

[Fixed] #973 when use ext-grid in one tree, other tree not use ext-grid has error on click.

[Fixed] #974 ext-grid: too much output in production mode.

[Fixed] #975 ext-grid: fix tree.visitRows() for empty tree.

[Fixed] #978 ext-grid: addChildren() throws error when grid is hidden.

Commit details.
Source code(tar.gz)
Source code(zip)
v2.33.0(Oct 29, 2019)
[Added] event preInit (fired before nodes are loaded).

[Changed] jQuery is now a peerDependency (>=1.9), so users can install or re-use their own version.

[Changed] ext-grid: updateViewport event is now also triggered for 'renumber' (i.e. expand, collapse)

[Fixed] #963: tree.setExpanded() fails when autoScroll is enabled

[Fixed] #964: handle case when source is not passed and no <ul> is embedded.

[Fixed] #966: Ext-dnd5: bug in function onDropEvent (case 'dragover')

[Fixed] ext-filter: sub-match counter is one too high.

Commit details.
Source code(tar.gz)
Source code(zip)
v2.32.0(Sep 10, 2019)
[Added] node.hasClass(className)

[Added] tree.applyCommand() and node.applyCommand() (experimental!)

[Added] tree.isLoading()

[Added] tree.toDict(includeRoot, callback) and node.toDict(recursive, callback): callback can now return false or "skip" to skip nodes.

[Fixed] #951 Hover issue in unselectable radio

ext-dnd5: allow autoExpand even if dropping is prevented

[Fixed] ext-filter: tree.rootNode.subMatchCount is now set correctly

[Fixed] #955 node.navigate($.ui.keyCode.DOWN, false) does not return promise

Stop testing with jQuery UI 1.10 and 1.11 (only jQuery UI 1.12 remains)

Commit details.
Source code(tar.gz)
Source code(zip)
v2.31.0(May 31, 2019)
New extension ext-grid (experimental)
This is a variant of ext-table that introduces viewport support, which allows to maintain huge data models while only rendering as many DOM elements as necessary.
Main changes:

A viewport is defined by the number of visible rows (tree.viewport.count) and the index of the first visible row (.start)

When scrolling, rows are not hidden, but removed and replaced. (This implies that the contents of embedded input fields should be written into the model immediately.)

Refactored ext-dnd5
Some breaking changes were made, mainly to improve handling of the dropEffect (note that ext-dnd5 was and still is experimental and in progress).

Remove dnd5.dropEffect callback option (set data.dropEffect instead)

Remove dnd5.dragImage callback option (call data.dataTransfer.setDragImage()

and set data.useDefaultImage = false instead)

Rename dnd5.preventRecursiveMoves to dnd5.preventRecursion

dnd5.preventVoidMoves now only aplies to 'move' operations, so we can copy before self

[Added] dnd5.preventSameParent option

[Added] hook treeStructureChanged

[Added] methods tree.findRelatedNode(), node.findRelatedNode()

[Added] method node.getPath()

[Added] methods $.ui.fancytree.getDragNode(), $.ui.fancytree.getDragNodeList()

[Added] event updateViewport

[Added] tree option .checkboxAutoHide to hide checkboxes unless selected or hovered.

[Added] tree option .treeId to prevent generation of a new sequence if the tree is re-initialized on a page.

[Changed] .getTree() now also accepts the tree id string

[Changed] #939: Keep a partsel flag that was explicitly set on a lazy node

[Changed] ext-clones: make default key generation more robust against collisions

[DEPRECATED] loaderror and lazyload options now throw an error instead of falling back to the correct loadError and lazyLoad

[DEPRECATED] tree.applyFilter was removed

[Fixed] #918 SVG font awesome 5 glyphs remove badge counter when parent node is collapsed

[Fixed] #921 ext-edit respectively focus handling: Internet Explorer scrolls briefly to the top/left of the tree container element after editing a node title if the tree container is partially outside the viewport

[Fixed] #931 Selecting grandparent selects all nodes of radiogroup in selectMode=3

[Fixed] #946 dnd5 - Counter badge shows up, although the drag was cancelled from dragStart callback

[Fixed] #947 dnd5 - dragEnd is fired only when re-ordering nodes within the same parent

[Fixed] missing tree.error() and broken node.error()

[Fixed] a bug in ext-logger

Optimized performance of expandAll() and ext-filter

Replace jshint/jscs with eslint

Now testing on Puppeteer/Chromium instead of PhantonJS

Use LF on Windows when checking out from git (added .gitattributes)

Update to jQuery 3.4

Commit details.
Source code(tar.gz)
Source code(zip)
v2.30.2(Jan 13, 2019)
Stop testing on IE 8 (no longer available on Saucelabs)

[Fixed] #910 ext-dnd5 throws error for draggable column headers

[Fixed] overrideMethod()'s calling context

[Fixed] #912 ext-dnd5 + ext-glyph awesome5 does not show the icons when dragging an item

[Fixed] #919 ext-multi: JavaScript error (event is not defined) in nodeKeydown

[Fixed] #922 scrollIntoView for plain trees that don't have a scrollbar

[Fixed] #924 ext-edit: Fix caret position for mouse-click in input

[Fixed] #928 ext-dnd5: Fix preventNonNodes option

[Fixed] #929 Fix .getTree() for jQuery 3

[Fixed] #930 ext-dnd5: If drag does not start, no drag data should be stored

Commit details.
Source code(tar.gz)
Source code(zip)
v2.30.1(Nov 13, 2018)
[Changed] Apply and enforce 'prettier' codestyle

[Changed] #897 Set font for table extension

[Fixed] #883: Font Awesome 4 animation spinner stays visible

[Fixed] #894: Fancytree assertion failed: scrollParent should be a simple element or window, not document or body.

[Fixed] #896 _requireExtension: order managment

[Fixed] #899 Creating duplicate icon when removing node using extension columnview

[Fixed] #900 ColumnView Extension - Toggle between parent and children not working

[Fixed] #909 With quicksearch enabled, does not search for non-Latin character

Commit details.
Source code(tar.gz)
Source code(zip)
v2.30.0(Sep 2, 2018)
[Changed] ext-edit trigger 'clickActive' now only triggers if no modifier keys (shift, meta, control, ...) are pressed.
Trigger 'shift+click' now only triggers if no other modifier key (control, ...) is pressed.

[Changed] #879 Rename ext-debug to ext-logger (jquery.fancytree.debug.js => jquery.fancytree.logger.js)

[Added] ext-multi is now deployed with jquery.fancytree-all.js (still experimental)

[Added] tree.activateKey(key, opts) now has an opts argument

[Added] nodata option (bool, string, or callback)

[Added] ext-table mergeStatusColumns option

[Added] new method tree.enable(flag)

[Added] new method tree.expandAll(flag, opts)

[Added] new methods tree.setOption(name, value) and tree.getOption(name)

[Fixed] ES6 import dependency on jquery for jquery.fancytree.ui-deps.js

[Fixed] #863 setActive() sometimes does not scroll node into view

[Fixed] #877 postProcess may now also return the object form {..., children: []}

[Fixed] #884 ReferenceError: jQuery is not defined at _simpleDeepMerge

[Fixed] autoScroll, node.scrollIntoView(), and .makeVisible() now work for tables as well.

Commit details.
Source code(tar.gz)
Source code(zip)
v2.29.1(Jun 27, 2018)
[Fixed] ES6 import dependency on jquery for jquery.fancytree.ui-deps.js

[Fixed] #848 Drag End Error with dnd5 extension (again): fancytree-drag-remove class not removed on drop/dragend

[Fixed] #875 ext-dnd5: Unwanted expanding of folder node when a node is dragged before/after it

[Fixed] #876 triggerStart: [] does not override the default settings.
NOTE: Options of type Array will now override the default option. Before, arrays were merged with the default.

[Fixed] ext-ariagrid default actions

Commit details.
Source code(tar.gz)
Source code(zip)
v2.29.0(Jun 16, 2018)
[Changed] toggleEffect now also accepts "toggle" or "slideToggle" to use jQuery effects instead of jQueryUI.
toggleEffect: { effect: "slideToggle", duration: 200 } is now the default.
'effects' component was removed from the bundled jquery.fancytree.ui-deps.js

[Fixed] #746 Animation bug when expanding/collapsing nodes

[Fixed] #848 Drag End Error with dnd5 extension

[Fixed] #850 ext-childcounter doesn't work with custom icons

[Fixed] #859 Fix log level configuration problem

[Fixed] #865 toggleEffect animation (effect: blind) sometimes got stuck.

Stop testing jQuery UI 1.9

Update to jQuery 3.3.1

Commit details.
Source code(tar.gz)
Source code(zip)
v2.28.1(Mar 19, 2018)
[Fixed] #844 Fix RTL for ext-table

[Fixed] #845 Fix RTL for ext-dnd/ext-dnd5

[Fixed] #764 Fix clicks on embedded tags when filter is on

Commit details.
Source code(tar.gz)
Source code(zip)
v2.28.0(Mar 2, 2018)
[Added] New extension ext-multi (experimental).

[Added] ext-dnd5 support for dragging multiple selected nodes.

[Added] #830 support for Font Awesome 5 (ext-glyph preset).

[Added] ext-glyph supports SVG icons.

[Added] icon option supports {html: "..."} content (also available for glyph-ext mapping).

[Added] New method tree.visitRows()

[Added] New method tree.selectAll()

[Added] New method node.isBelowOf()

[Added] New extension ext-fixed (experimental).

[Changed] Re-rename clearData() to clearPersistData()

[Changed] #828 Re-scale debugLevel from 0:quiet to 4:verbose, allowing to suppress warnings and even errors.

[Added] CSS helper classes:
.fancytree-helper-disabled
.fancytree-helper-hidden (replaces ui-helper-hidden)
.fancytree-helper-indeterminate-cb
fancytree-helper-spin for icon animations (replaces glyphicon-spin)

[Fixed] #819: ext-filter: Handle nodes without title.

[Fixed] #835: ext-dnd5: Accept drop externals after drag.

Commit details.
Source code(tar.gz)
Source code(zip)
v2.27.0(Dec 16, 2017)
BREAKING CHANGES:

node.type is now a first-class property of FancytreeNode. Node data {..., type: "foo"} is now available as node.type (before: node.data.type).

The properties tree.types and tree.columns have been added to Fancytree. If passed with source data, they are now available directly instead of tree.data.types or tree.data.columns.

Support patterns for node types:

The properties node.type and tree.types are recommended to implement node-type specific configuration (details).

Event data argument contains typeInfo == tree.types[node.type].

Improved ext-glyph:

[Added] support for ligature icons (e.g. material icons).

[Added] icon option can now return a dict to create a ligature icon.

Improved tree.loadKeyPath():

[Added] support for a custom path segment matcher. This allows to have key paths with segments other than node.key.

[Improved] the returned deferred promise now triggers progress() events which can be used instead of the callback.

The property tree.columns was added to Fancytree. Currently only reserved as recommended pattern to pass global meta-data for ext-table.

[Added] ext-edit: new trigger mode clickActive for option triggerStart: [...].

[Added] #798 Tooltip support for icons (dynamic option iconTooltip).

[Added] #808 Pass custom storage providers to ext-persist.

[Improved] ext-table no longer needs empty tbody/tr if thead is present.

[Fixed] #796 UMD requirements for node/CommonJS

[Fixed] #803 jquery.fancytree.ui-deps.js does not override existing widgets.

[Fixed] #815 <mark> element missing in filtered nodes (minified bundle, IE 11).

[Fixed] #816 findNextNode() doesn't set default for 'startNode' argument.

[Added] Material Design demo

[Added] Demo for Fancytree inside a jquery-confirm popup

[Changed] String representation is now "FancytreeNode@_4[title='My name']"

[DEPRECATED] tree.clearCookies(). Use tree.clearData() instead.

Commit details.
Source code(tar.gz)
Source code(zip)
v2.26.0(Nov 4, 2017)
BREAKING CHANGES:

[Fixed] #792 postProcess is now also called for non-Ajax sources

[Improved] LESS now compiles with webpack

[Added] #791 ext-glyph support for radio buttons

[Added] Color definitions for skin-awesome (taken from skin-lion)

[Fixed] $.ui.fancytree.getNode() for ES6 environments

[Fixed] #789 Wrong node is activated in IE, when clicking in unfocused container

Commit details.
Source code(tar.gz)
Source code(zip)
v2.25.0(Oct 31, 2017)
BREAKING CHANGES:

The dist/src/ folder was renamed to dist/modules.

Some directories like demo/ are no longer part of the npm install.

Improved Module Support and Distribution

The dist/ folder now includes a modules/ directory with fancytree core and all extensions.

All modules have UMD wrappers with defined dependencies.

Internal jQuery UI dependencies are deployed as module and implicitly loaded.

jquery.fancytree/dist/modules/jquery.fancytree is defined as package main module, so Fancytree can be included using a simple fancytree = require('jquery.fancytree'). See the docs for details.

All modules now return the $.ui.fancytree object.

[Added] new static method $.ui.fancytree.createTree(elem, opts)

[Added] Source map files for jquery.fancytree-all-deps.min.js

[Added] New extension ext-fixed (work-in-progress, experimental)

[Fixed] #767: Input inside table head not working

[Fixed] #768: Can't use keyboard to select nodes when checkbox option is false

[Fixed] #782: wide extension - padding is off when checkbox option is changed

[Fixed] #787: Fix getEventTarget() for custom icons

Commit details.
Source code(tar.gz)
Source code(zip)
v2.24.0(Aug 26, 2017)
[Added] ext-glyph option preset (making the map option optional)

[Fixed] #695: List AMD dependency on jQuery UI

[Fixed] #735: Trying to set root node selected throws an error

[Fixed] Drop marker for ext-glyph + ext-dnd5

[Fixed] #740: Filtering must not consider escaped html entities

[Fixed] #741: Passing an empty string ("") as filter calls clearFilter()

[Fixed] #761: dnd5 throws exception when tree is empty

[Fixed] #748: Drag start should not activate a node

[Fixed] #764: FancyTree filter breaks links

Updated jsdoc to 3.5

Commit details.
Source code(tar.gz)
Source code(zip)
v2.23.0(May 27, 2017)
The external dependency on jQuery UI was removed. A new library jquery.fancytree-all-deps.min.js is now added to the distribution. It includes all dependencies on jQuery UI, so the only remaining external dependency is jQuery. Continue to use jquery.fancytree-all.min.js if jQuery UI is already included anyway.

Refactored the select behavior details:

[Added] Allow control of selection status propagation with new options: unselectable, unselectableIgnore, unselectableStatus.

[Added] node option radiogroup enables single-select for child nodes

[Added] option opts.noEvents to setSelected(flag, opts)

[Improved] Option 'checkbox' can have the string value "radio" (only visual effect)

BREAKING CHANGES:

The hideCheckbox option was removed. Use checkbox: false instead. Note that the <li class='hideCheckbox'> is still parsed from input HTML and converted accordingly.

The optional modifier class <div class='fancytree-radio'> was removed. This class was used on the container to turn all checkbox items into radio buttons. Instead, this class is now added to <span class="fancytree-checkbox fancytree-radio">. Use the tree.checkox: "radio" option to activate this for the whole tree.

The callback signature for the tree.tooltip option has changed to tooltip(event, data)

[Improved] aria option is now on by default

Use the new dynamic options pattern for checkbox, icon, tooltip, unselectable, unselectableIgnore, unselectableStatus. See also dynamic options.

[Added] New method node.visitSiblings()

[Added] #730 ext-persist option expandOpts is passed to setExpanded() Allows to suppress animation or event generation.

Commit details.
Source code(tar.gz)
Source code(zip)
v2.22.5(May 11, 2017)
[Improved] #709 experimental ext-ariagrid

Commit details.
Source code(tar.gz)
Source code(zip)
v2.22.4(May 6, 2017)
[Improved] #709 experimental ext-ariagrid

Commit details.
Source code(tar.gz)
Source code(zip)
v2.22.3(May 5, 2017)
[Improved] #709 experimental ext-ariagrid

Commit details.
Source code(tar.gz)
Source code(zip)
v2.22.2(Apr 29, 2017)
[Fixed] #729 Fix regression with addChild performance improvements (#708)

Commit details.
Source code(tar.gz)
Source code(zip)
v2.22.1(Apr 21, 2017)
[Fixed] #722 Fix regression with addChild performance improvements (#708)

Commit details.
Source code(tar.gz)
Source code(zip)
v2.22.0(Apr 10, 2017)
[Added] ext-dnd5 now part of standard distribution

[Added] #693 ext-dnd/dnd5: configurable drop marker offset

[Added] #616 ext-wide: configurable left padding

[Added] New method $.ui.fancytree.evalOption()

[Improved] #601 ext-filter: improve performance (don't render hidden nodes)

[Improved] ext-contextMenu: disable keyboard while popup is open and restore focus

[Improved] #701 ext-hotkeys: Prevent default behavior on hot key combination

[Improved] #708 speedup improvement for addChildren

[Fixed] #680 ext-dnd5: top level nodes not draggable

[Fixed] #681 ext-table: exception when a lazy node has children: []

[Fixed] #699 ext-dnd5: Icon remains after dnd is cancelled

[Fixed] #702 $.ui.fancytree.getNode(jQuery)' for jQuery v3.x

[Fixed] #706 Fix DND where fancytree-title span is not a direct child due to custom layouts

[Fixed] #712 When clicking in a scrolled tree for the first time, focus is not set properly

[Fixed] #716 ext-wide: animation 'jumps' (jQuery UI 1.12)

[Fixed] #717, #719 expand/collapse shows displaced child nodes when scrolled (jQuery UI 1.12)

Update demos to jQuery 3.2.1 / jQuery UI 1.12.1

Commit details.
Source code(tar.gz)
Source code(zip)
v2.21.0(Jan 15, 2017)
[Added] New extension 'ext-dnd5' for native HTML5 drag'n'drop support

[Added] rtl option for right-to-left script support

[Added] Add $.ui.fancytree.overrideMethod()

[Added] hook treeSetOption allows extensions to update on option changes

[Changed] standard CSS no longer defines overflow: auto for the container. If the tree container has a fixed height, overflow: auto or overflow: scroll should be added to make it scrollable. (Otherwise this always would be the scroll parent for ext-dnd5.)

[Improved] better support for initializing from embedded JSON using the data-type="json" attribute

[Fixed] corner case of #658 when ext-edit is loaded, but inactive

[Fixed] #396 Don't load 'loading.gif' for glyph skins

[Fixed] #675 ext-table: node.render(false) puts first node at end

Commit details.
Source code(tar.gz)
Source code(zip)