Tree Binding

The tree binding provides a full tree implementation replicating much of the functionality of a standard windows explorer tree.

Features include, drag & drop, rename, delete, icon styling, customizable default behavior for each node type

The tree also integrates with the context menu binding to allow each node to display a custom context menu.

A set of global behavior configuration controls each nodes behavior and can be overridden by supplying a viewModel.defaults configuration object. Multiple node types are allowed and each node type can have it's own behavior configured using the viewModel.defaults.typename options.

If the jquery cookie plugin is included the tree will remember which nodes were expanded/closed when the page was last loaded.

Note: This feature will not work in chrome from a local file version of this example due to a restriction on writing local cookies.

Usage (with context menu)

Markup

Javascript

Results

Right click a node to view the context menu

Usage (alternative styles and behavior)

Markup

Javascript

Results

Notice the different icons, the groups are not draggable but the widgets are.

Options

Tree ViewModel

Name Description Default
defaults

The defaults object defines the behavior for all node types.

Type specific overrides can be supplied as defaults.typename definitions with the same options as the global.

  • isDraggable : true
  • isDropTarget : true
  • canAddChildren : true
  • childType : 'folder'
  • renameAfterAdd : true
  • connectToSortable : false
  • dragCursorAt : { left: 28, bottom: 0 }
  • dragCursor : 'auto'
  • dragHelper :
childrenThe array of root nodes. There is no explicit root node instead the parent viewmodel is considered the root.
logToThe jquery selector of the log div to use to display status info.#log
rememberWhether the state of the tree is saved in a cookiefalse
dragHolderA global observable needed to contain the node currently being dragged. Needed to allow drag and drop between trees and sortables etc.
handlers

An extendable object containing handlers that are called for each tree operation

The handlers you can override are 'selectNode', 'addNode', 'renameNode', 'deleteNode', 'moveNode', 'startDrag' & 'endDrag'

The handlers are your opportunity to verify that the operation is valid. In the case of select, add, rename, delete and move operations, the calling of onSuccess confirms the operation (perhaps after receiving the result from an ajax operation).

When 'addNode' is called the new id for the created node must be returned to the onSuccess callback.

Nodes

Name Description Default
cssClassThe default css class applied to all node. This acts are the node type name.'folder'
nameThe name of the node displayed in the tree
idThe id of the node.
childrenAn array of child nodes.
isOpenWhether the node is in an open state initially.

Dependencies