WjTreeView Class

AngularJS directive for the TreeView control.

Use the wj-tree-view directive to add TreeView to your AngularJS applications. Note that directive and parameter names must be formatted as lower-case with dashes instead of camel-case. For example:

<wj-tree-view  items-source="items"
  display-member-path="ctx.displayMemberPath"
  child-items-path="ctx.childItemsPath"
  is-animated="ctx.isAnimated">
</wj-tree-view>

The wj-tree-view directive supports the following attributes:

items-source: =An array that contains the TreeView items.
child-items-path: @ A value indicating the name of the property (or properties) that contains the child items for each node.
control: = A reference to the TreeView control created by this directive.
display-member-path: @ A value indicating the name of the property (or properties) to use as the visual representation of the nodes.
image-member-path: @ A value indicating the name of the property (or properties) to use as a source of images for the nodes.
is-content-html: @ A value indicating whether whether items are bound to plain text or HTML.
initialized: & This event occurs after the binding has finished initializing the control with attribute values.
is-initialized: = A value indicating whether the binding has finished initializing the control with attribute values.
show-checkboxes: @ A value determines whether the TreeView should add checkboxes to nodes and manage their state.
auto-collapse: @ A value determines if sibling nodes should be collapsed when a node is expanded.
is-animated: @ A value indicating whether to use animations when expanding or collapsing nodes.
is-readOnly: @ A value determines whether users can edit the text in the nodes.
allow-dragging: @ A value determines whether users can drag and drop nodes within the TreeView.
expand-on-click: @ A value determines whether to expand collapsed nodes when the user clicks the node header.
selected-item: @ A value indicating the data item that is currently selected.
selected-node: @ A value indicating TreeNode that is currently selected.
checked-items: @ An array containing the items that are currently checked.
lazy-load-function: = A function that loads child nodes on demand.
items-source-changed: & The TreeView.itemsSourceChanged event handler.
loading-items: & The TreeView.loadingItems event handler.
loaded-items: & The TreeView.loadedItems event handler.
item-clicked: & The TreeView.itemClicked event handler.
selected-item-changed: & The TreeView.selectedItemChanged event handler.
checked-items-Changed: & The TreeView.checkedItemsChanged event handler.
is-collapsed-changing: & The TreeView.isCollapsedChanging event handler.
is-collapsed-changed: & The TreeView.isCollapsedChanged event handler.
is-checked-changing: & The TreeView.isCheckedChanging event handler.
is-checked-changed: & The TreeView.isCheckedChanged event handler.
format-item: & The TreeView.formatItem event handler.
drag-start: & The TreeView.dragStart event handler.
drag-over: & The TreeView.dragOver event handler.
drop: & The TreeView.drop event handler.
drag-end: & The TreeView.dragEnd event handler.
node-edit-starting: & The TreeView.nodeEditStarting event handler.
node-edit-started: & The TreeView.nodeEditStarted event handler.
node-edit-ending: & The TreeView.nodeEditEnding event handler.
node-edit-ended: & The TreeView.nodeEditEnded event handler.

Heirarchy

WjDirective
- WjTreeView