Skip to content

Migrate from Fancytree to Wunderbaum#

What has Changed?#

Main Changes to Fancytree:

  • Written in TypeScript, transpiled to JavaScript ES6 with type hints (.esm & .umd).
  • Removed dependecy on jQuery and jQuery UI.
  • Dropped support for Internet Explorer.
  • Markup is now <div> based, instead of <ul>/<li> and <table>.
  • Grid layout is now built-in standard. A plain tree is only a special case thereof.
  • New viewport concept (implies a fixed header and a scrollable body).
  • 'Clone' suppport is now built-in standard (i.e. support for duplicate refKeys in addition to unique keys).
  • Built-in html5 drag'n'drop.
  • Titles are always XSS-safe now (former explicit escapeTitles: true).
  • 'folder' is no longer a special built-in node type. Instead, the application can define any number of node types.

Missing Features (as of today)

  • Persistence

Migration Guide#

Many general concepts from Fancytree are still the same, see the Concepts for a general overview.

Especially the rendering model and grid support has changed significantly, however.

Feature Fancytree Wunderbaum
Dependency Requires jQuery and jQuery UI No dependency on jQuery
Browser Support Supports Internet Explorer Dropped support for Internet Explorer
Markup <ul>/<li> and <table> based <div> based
Layout Grid layout as an extension Grid layout built-in
Viewport No built-in viewport concept New viewport concept with fixed header and scrollable body
Drag and Drop Requires additional plugins Built-in HTML5 drag and drop
XSS Safety Requires escapeTitles: true Titles are always XSS-safe
Node Types 'folder' as a special node type Application-defined node types
Performance Lazy rendering of HTML elements, but may be slow with large number of expanded nodes. Handles large number of nodes (100k+)

Replace the Script and CSS dependencies#

Init Fancytree Wunderbaum
Tutorial Tutorial Tutorial

Tree Options#

Options are mostly the same, but some property names have changed.
Major changes were made to the grid and dnd configuration.

Options Fancytree Wunderbaum
Reference API API
Tutorial Docs Docs

Tree and Node Properties#

  • refKey and refType are now direct properties of the node object.
  • node.folder was dropped in favor af a more general node.type property.
Properties Fancytree Wunderbaum
Tree Reference Tree model Tree model
Node Reference Node model Node model
Tutorial — Tutorial

Data Format#

The data format is mostly the same, but some property names have changed. For example, folder is now type: "folder".

Data Fancytree Wunderbaum
Reference — Initialize
— Formats
Tutorial Tutorial Tutorial

API Calls#

The API is similar, but some method names and signatures have changed.

API Fancytree Wunderbaum
Reference Tree API Tree API
Node API NodeAPI
Tutorial Tutorial Tutorial

Event Handlers#

The signature of event handlers has changed from function(event, data) to function(event).

Events Fancytree Wunderbaum
Reference Handler API Handler API
Event model Event model
Tutorial Tutorial Tutorial