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.
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 :
children
The array of root nodes. There is no explicit root node instead the parent viewmodel is considered the root.
logTo
The jquery selector of the log div to use to display status info.
#log
remember
Whether the state of the tree is saved in a cookie
false
dragHolder
A 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
cssClass
The default css class applied to all node. This acts are the node type name.