behavior:tree-view

Behavior of hierarchical <select> lists. It can be applied to any block level container.

Elements

These elements have behavior:select applied by default:

• <select|tree></select>

Model

The behavior recoginizes two types <option>s:

• "Leaf" <option>'s that do not contain other <option>s;
• "Node" <option>s that contain textual element followed by other <option>s.

<option>
    <caption>Node caption</caption>
    <option>Leaf 1</option>
    <option>Leaf 2</option>
</option>

Selected option will have :current  state flag set.

Node <option> gets :node runtime flag set (and corresponding CSS pseudo-class) on it by the runtime. Therefore selectors:

• option:node - match all node options;
• option:not(:node) - match all leaf nodes.

option:node may have either :expanded or :collapsed runtime flag set in response to UI events (mouse and keyboard events).

The behavior supports so called "virtual tree" mode. Initially the tree may have all node options collapsed and empty and populate them upon ELEMENT_EXPANDED event receiving. And clear on ELEMENT_COLLAPSED event to minimize memory needed to represent the tree. See sdk/samples/ideas/virtual-tree/ sample.

Attributes

• expanded on <option> - <option expanded> will get :expanded state by default.

Events

Other than standard set of events (mouse, keyboard, focus) behavior:tree-view generates:

• SELECT_SELECTION_CHANGED event, generated when user changes selection of the select (click on one of options). Posted event.
• SELECT_SELECTION_CHANGING event, selection is about to change. Synchronous event.
• ELEMENT_EXPANDED event, is sent to node option that gets expanded.
• ELEMENT_COLLAPSED event, is sent to node option that gets collapsed.

Methods

N/A - behavior:tree-view does not introduce any specific methods.

Value

any, read/write. value of selected option. Value of the option is its value attribute or option's text if there is no value defined.

Tree events handling in script

raw onControlEvent handler

var btn = $(select#some);
btn.onControlEvent = function(evt)
{
  switch(evt.type) {
    case Event.SELECT_SELECTION_CHANGED: /* current option was changed */ break;
    case Event.ELEMENT_EXPANDED: /* evt.target is expanded */ break;
    case Event.ELEMENT_COLLAPSED: /* evt.target is collapsed */ break;
  }
}

on() subscription

var sel = $(select#some);
sel.on("change", function() { ... event handling code ... });
sel.on("expand", "option", function() { ... event handling code ... });
sel.on("collapse", "option", function() { ... event handling code ... });

decorators.tis handler

include "decorators.tis";
@when Event.ELEMENT_EXPANDED @on "select#some" :: ... event handling code ...;
@when Event.ELEMENT_COLLAPSED @on "select#some" :: ... event handling code ...;