Widget: treeView

var treeData = {
    label: "Root",
    children: [
        {
            label: "Child 1",
            children: [
                {
                    label: "Grandchild"
                }
            ]
        },
        {
            label: "Child 2",
            children: []
        }
    ]
};
var myAdapter = $.apex.treeView.makeDefaultNodeAdapter( treeData );

$( "#simpleTree" ).treeView( {
    getNodeAdapter: function() { return myAdapter; },
    expandRoot: false
} );

Markup:
<div id="markupTree">
  <ul style="display:none;">
    <li><a href="#toc">Table of Contents</a>
      <ul>
        <li><a href="#chapter1">Chapter 1</a>
        <li><a href="#chapter2">Chapter 2</a>
      </ul>
    </li>
  </ul>
</div>

JavaScript:
$( "#markupTree" ).treeView( {
    navigation: true
} );

Type:

• actions

Default Value:

• apex.actions (the global actions context)

Examples

Initialize the treeView with the actionsContext option specified.

$( ".selector" ).treeView( {
    actionsContext: myContext
} );

Get or set option actionsContext after initialization.

// get
var value = $( ".selector" ).treeView( "option", "actionsContext" );
// set
$( ".selector" ).treeView( "option", "actionsContext", myContext );

Type:

• Object

Type:

• boolean

Default Value:

• true

Example

Initialize the treeView with the allowCopy option specified.

$( ".selector" ).treeView( {
    allowCopy: false
} );

Type:

• boolean

Default Value:

• false

Examples

Initialize the treeView with the autoCollapse option specified.

$( ".selector" ).treeView( {
    autoCollapse: true
} );

Get or set option autoCollapse after initialization.

// get
var value = $( ".selector" ).treeView( "option", "autoCollapse" );
// set
$( ".selector" ).treeView( "option", "autoCollapse", true );

Type:

• boolean

Default Value:

• false

Examples

Initialize the treeView with the clickToRename option specified.

$( ".selector" ).treeView( {
    clickToRename: true
} );

Get or set option clickToRename after initialization.

// get
var value = $( ".selector" ).treeView( "option", "clickToRename" );
// set
$( ".selector" ).treeView( "option", "clickToRename", true );

Type:

• boolean

Default Value:

• true

Example

Initialize the treeView with the collapsibleRoot option specified.

$( ".selector" ).treeView( {
    collapsibleRoot: false
} );

Type:

• object

Default Value:

• null

Example

Initialize the treeView with the contextMenu option specified.

$( ".selector" ).treeView( {
    contextMenu: {
    items:[
        { type:"action", label: "Action 1", action: function() { alert("Action 1"); } },
        { type:"action", label: "Action 2", action: function() { alert("Action 2"); } }
    ]
}
} );

Type:

• function

Default Value:

• null

Example

Initialize the treeView with the contextMenuAction option specified.

$( ".selector" ).treeView( {
    contextMenuAction: function( event ) {
    // do something to display a context menu
 }
} );

Type:

• string

Default Value:

• null

Example

Initialize the treeView with the contextMenuId option specified.

$( ".selector" ).treeView( {
    contextMenuId: "myContextMenu"
} );

Type:

• false | string

Default Value:

• false

Examples

Initialize the treeView with the doubleClick option specified.

$( ".selector" ).treeView( {
    doubleClick: "toggle"
} );

Get or set option doubleClick after initialization.

// get
var value = $( ".selector" ).treeView( "option", "doubleClick" );
// set
$( ".selector" ).treeView( "option", "doubleClick", "toggle" );

Type:

• boolean

Default Value:

• false

Examples

Initialize the treeView with the dragAndDrop option specified.

$( ".selector" ).treeView( {
    dragAndDrop: true
} );

Get or set option dragAndDrop after initialization.

// get
var value = $( ".selector" ).treeView( "option", "dragAndDrop" );
// set
$( ".selector" ).treeView( "option", "dragAndDrop", true );

Type:

• string

Default Value:

• "parent"

Type:

• boolean

Default Value:

• false

Examples

Initialize the treeView with the dragContainment option specified.

$( ".selector" ).treeView( {
    dragContainment: true
} );

Get or set option dragContainment after initialization.

// get
var value = $( ".selector" ).treeView( "option", "dragContainment" );
// set
$( ".selector" ).treeView( "option", "dragContainment", true );

Type:

• string

Default Value:

• "auto"

Type:

• false | Object

Default Value:

• false

Type:

• number

Default Value:

• 1200

Examples

Initialize the treeView with the dragExpandDelay option specified.

$( ".selector" ).treeView( {
    dragExpandDelay: 1000
} );

Get or set option dragExpandDelay after initialization.

// get
var value = $( ".selector" ).treeView( "option", "dragExpandDelay" );
// set
$( ".selector" ).treeView( "option", "dragExpandDelay", 1000 );

Type:

• string | function

Default Value:

• true

Type:

• boolean

Default Value:

• false

Examples

Initialize the treeView with the dragMultiple option specified.

$( ".selector" ).treeView( {
    dragMultiple: true
} );

Get or set option dragMultiple after initialization.

// get
var value = $( ".selector" ).treeView( "option", "dragMultiple" );
// set
$( ".selector" ).treeView( "option", "dragMultiple", true );

Type:

• false | number

Default Value:

• false

Examples

Initialize the treeView with the dragOpacity option specified.

$( ".selector" ).treeView( {
    dragOpacity: 0.4
} );

Get or set option dragOpacity after initialization.

// get
var value = $( ".selector" ).treeView( "option", "dragOpacity" );
// set
$( ".selector" ).treeView( "option", "dragOpacity", 0.4 );

Type:

• boolean

Default Value:

• false

Examples

Initialize the treeView with the dragReorder option specified.

$( ".selector" ).treeView( {
    dragReorder: true
} );

Get or set option dragReorder after initialization.

// get
var value = $( ".selector" ).treeView( "option", "dragReorder" );
// set
$( ".selector" ).treeView( "option", "dragReorder", true );

Type:

• boolean

Default Value:

• true

Examples

Initialize the treeView with the dragScroll option specified.

$( ".selector" ).treeView( {
    dragScroll: false
} );

Get or set option dragScroll after initialization.

// get
var value = $( ".selector" ).treeView( "option", "dragScroll" );
// set
$( ".selector" ).treeView( "option", "dragScroll", false );

Type:

• number

Default Value:

• 20

Examples

Initialize the treeView with the dragScrollSensitivity option specified.

$( ".selector" ).treeView( {
    dragScrollSensitivity: 30
} );

Get or set option dragScrollSensitivity after initialization.

// get
var value = $( ".selector" ).treeView( "option", "dragScrollSensitivity" );
// set
$( ".selector" ).treeView( "option", "dragScrollSensitivity", 30 );

Type:

• number

Default Value:

• 10

Examples

Initialize the treeView with the dragScrollSpeed option specified.

$( ".selector" ).treeView( {
    dragScrollSpeed: 8
} );

Get or set option dragScrollSpeed after initialization.

// get
var value = $( ".selector" ).treeView( "option", "dragScrollSpeed" );
// set
$( ".selector" ).treeView( "option", "dragScrollSpeed", 8 );

Type:

• number

Default Value:

• 1000

Examples

Initialize the treeView with the dragZIndex option specified.

$( ".selector" ).treeView( {
    dragZIndex: 1001
} );

Get or set option dragZIndex after initialization.

// get
var value = $( ".selector" ).treeView( "option", "dragZIndex" );
// set
$( ".selector" ).treeView( "option", "dragZIndex", 1001 );

Type:

• boolean

Default Value:

• true

Examples

Initialize the treeView with the expandRoot option specified.

$( ".selector" ).treeView( {
    expandRoot: false
} );

Get or set option expandRoot after initialization.

// get
var value = $( ".selector" ).treeView( "option", "expandRoot" );
// set
$( ".selector" ).treeView( "option", "expandRoot", false );

Type:

• function

Default Value:

• null

Example

Initialize the treeView with the getNodeAdapter option specified.

$( ".selector" ).treeView( {
    getNodeAdapter: function() { return myAdapter; }
} );

Type:

• string

Default Value:

• "a-Icon"

Examples

Initialize the treeView with the iconType option specified.

$( ".selector" ).treeView( {
    iconType: "fa"
} );

Get or set option iconType after initialization.

// get
var value = $( ".selector" ).treeView( "option", "iconType" );
// set
$( ".selector" ).treeView( "option", "iconType", "fa" );

Type:

• string

Default Value:

• treeView element id or "tree" if id is null

Example

Initialize the treeView with the idPrefix option specified.

$( ".selector" ).treeView( {
    idPrefix: "tree7"
} );

Type:

• boolean

Default Value:

• false

Examples

Initialize the treeView with the keyboardAdd option specified.

$( ".selector" ).treeView( {
    keyboardAdd: true
} );

Get or set option keyboardAdd after initialization.

// get
var value = $( ".selector" ).treeView( "option", "keyboardAdd" );
// set
$( ".selector" ).treeView( "option", "keyboardAdd", true );

Type:

• boolean

Default Value:

• false

Examples

Initialize the treeView with the keyboardDelete option specified.

$( ".selector" ).treeView( {
    keyboardDelete: true
} );

Get or set option keyboardDelete after initialization.

// get
var value = $( ".selector" ).treeView( "option", "keyboardDelete" );
// set
$( ".selector" ).treeView( "option", "keyboardDelete", true );

Type:

• boolean

Default Value:

• false

Examples

Initialize the treeView with the keyboardRename option specified.

$( ".selector" ).treeView( {
    keyboardRename: true
} );

Get or set option keyboardRename after initialization.

// get
var value = $( ".selector" ).treeView( "option", "keyboardRename" );
// set
$( ".selector" ).treeView( "option", "keyboardRename", true );

Type:

• string

Default Value:

• "a-TreeView-label"

Type:

• boolean

Default Value:

• false

Examples

Initialize the treeView with the multiple option specified.

$( ".selector" ).treeView( {
    multiple: true
} );

Get or set option multiple after initialization.

// get
var value = $( ".selector" ).treeView( "option", "multiple" );
// set
$( ".selector" ).treeView( "option", "multiple", true );

Type:

• boolean

Default Value:

• false

Examples

Initialize the treeView with the navigation option specified.

$( ".selector" ).treeView( {
    navigation: true
} );

Get or set option navigation after initialization.

// get
var value = $( ".selector" ).treeView( "option", "navigation" );
// set
$( ".selector" ).treeView( "option", "navigation", true );

Type:

• boolean

Default Value:

• false

Examples

Initialize the treeView with the nodeSelector option specified.

$( ".selector" ).treeView( {
    nodeSelector: true
} );

Get or set option nodeSelector after initialization.

// get
var value = $( ".selector" ).treeView( "option", "nodeSelector" );
// set
$( ".selector" ).treeView( "option", "nodeSelector", true );

Type:

• string

Default Value:

• "default"

Examples

Initialize the treeView with the scope option specified.

$( ".selector" ).treeView( {
    scope: "parts"
} );

Get or set option scope after initialization.

// get
var value = $( ".selector" ).treeView( "option", "scope" );
// set
$( ".selector" ).treeView( "option", "scope", "parts" );

Type:

• boolean

Default Value:

• true

Examples

Initialize the treeView with the showRoot option specified.

$( ".selector" ).treeView( {
    showRoot: false
} );

Get or set option showRoot after initialization.

// get
var value = $( ".selector" ).treeView( "option", "showRoot" );
// set
$( ".selector" ).treeView( "option", "showRoot", false );

Type:

• Object

Default Value:

• null

Example

Initialize the treeView with the tooltip option specified.

$( ".selector" ).treeView( {
    tooltip: {
        show: { delay: 1000, effect: "show", duration: 500 },
        content: function ( callback, node ) {
            if ( !node ) {
                return null;
            }
            return node.tooltip;
        }
    }
} );

Type:

• boolean

Default Value:

• true

Examples

Initialize the treeView with the useLinks option specified.

$( ".selector" ).treeView( {
    useLinks: false
} );

Get or set option useLinks after initialization.

// get
var value = $( ".selector" ).treeView( "option", "useLinks" );
// set
$( ".selector" ).treeView( "option", "useLinks", false );

Properties:

Properties:

Examples

Initialize the treeView with the activateNode callback specified:

$( ".selector" ).treeView({
    activateNode: function( event, ui ) {}
});

Bind an event listener to the treeviewactivatenode event:

$( ".selector" ).on( "treeviewactivatenode", function( event, ui ) {} );

Properties:

Properties:

Examples

Initialize the treeView with the beginEdit callback specified:

$( ".selector" ).treeView({
    beginEdit: function( event, ui ) {}
});

Bind an event listener to the treeviewbeginedit event:

$( ".selector" ).on( "treeviewbeginedit", function( event, ui ) {} );

Properties:

Properties:

Properties:

Examples

Initialize the treeView with the endEdit callback specified:

$( ".selector" ).treeView({
    endEdit: function( event, ui ) {}
});

Bind an event listener to the treeviewendedit event:

$( ".selector" ).on( "treeviewendedit", function( event, ui ) {} );

Properties:

Examples

Initialize the treeView with the expansionStateChange callback specified:

$( ".selector" ).treeView({
    expansionStateChange: function( event, ui ) {}
});

Bind an event listener to the treeviewexpansionstatechange event:

$( ".selector" ).on( "treeviewexpansionstatechange", function( event, ui ) {} );

Properties:

Properties:

Properties:

Examples

Initialize the treeView with the selectionChange callback specified:

$( ".selector" ).treeView({
    selectionChange: function( event ) {}
});

Bind an event listener to the treeviewselectionchange event:

$( ".selector" ).on( "treeviewselectionchange", function( event ) {} );

Properties:

Properties:

Parameters:

Throws:

Parameters:

Throws:

Parameters:

Example

This example will collapse the currently selected node(s) if expanded.

var tree$ = $( ".selector" );
tree$.treeView( "collapse", tree$.treeView( "getSelection" ) );

Parameters:

Example

This example will collapse all tree nodes.

$( ".selector" ).treeView( "collapseAll" );

Parameters:

Throws:

Parameters:

Throws:

Parameters:

Parameters:

Example

This example will expand the currently selected node(s) if collapsed and has children.

var tree$ = $( ".selector" );
tree$.treeView( "expand", tree$.treeView( "getSelection" ) );

Parameters:

Example

This example will expand all tree nodes.

$( ".selector" ).treeView( "expandAll" );

Parameters:

Returns:

Type

jQuery

Example

This example searches the whole tree for any nodes that contains the string "ton" in the label property. It then adds the class "findMatch" to each node's label. The default tree node adapter uses the label property as the node label to display.

$( ".selector" ).treeView( "find", {
    depth: -1,
    findAll: true,
    match: function(n) {
        return n.label.indexOf( "ton" ) >= 0;
    }
} ).find( ".a-TreeView-label" ).addClass( "findMatch" );

Example

Focus the treeView.

$( ".selector" ).treeView( "focus" );

Throws:

Returns:

Examples

This example gets the expanded node ids for an APEX Tree region with static id "myTree" and saves them in a page item. This could be done when the page is submitted (See event apex.event:apexpagesubmit) or every time the expansion state changes (see event treeView#event:expansionStateChange).

var expandedIds = apex.region( "myTree" ).call( "getExpandedNodeIds" );
$s( "P1_EXPANDED_IDS", expandedIds.join( ":" ) );

This example builds on the previous one to restore the node expansion state when the page loads; when the tree node adapter is created. This code goes in the Tree region JavaScript Initialization Code attribute for region with static id "myTree". Note the makeNodeAdapter option is specific to the APEX Tree region not the treeView widget.

function( options ) {
    options.makeNodeAdapter = function( data, types, hasIdentity ) {
        var adapter;
        adapter = $.apex.treeView.makeDefaultNodeAdapter( data, types, hasIdentity, $v("P1_EXPANDED_IDS").split(":") );
        return adapter;
    }
    return options;
}

Throws:

Returns:

Type

Object

Returns:

Type

treeNodeAdapter

Example

This example logs to the console the node label of each child of the first selected node.

var i, count,
    selectedNode = $( ".selector" ).treeView( "getSelectedNodes" )[0],
    adapter = $( ".selector" ).treeView( "getNodeAdapter" );
if ( selectedNode ) {
    count = adapter.childCount( selectedNode );
    for ( i = 0; i < count; i++ ) {
        console.log( "Label: " + adapter.child( selectedNode, i ).label );
    }
}

Parameters:

Returns:

Type

Array.<treeNodeAdapter.node>

Example

This example replaces the labels of all the selected nodes with a lowercase label.

var tree$ = $( ".selector" ),
    selection$ = tree$.treeView( "getSelection" ),
    nodes = tree$.treeView( "getNodes", selection$ );
nodes.forEach( function( n, i ) {
    n.label = n.label.toLowerCase();
    tree$.treeView( "update", selection$.eq(i) )
} );

Returns:

Type

Array.<treeNodeAdapter.node>

Example

This example gets the nodes for the current selection.

var selectedNodes = $( ".selector" ).treeView( "getSelectedNodes" );

Returns:

Type

jQuery

Example

This example gets current selected treeView node elements as a jQuery set.

var selection$ = $( ".selector" ).treeView( "getSelection" );

Parameters:

Throws:

Returns:

Type

jQuery

Parameters:

Throws:

Parameters:

Example

This example refreshes (renders) the whole tree.

$( ".selector" ).treeView( "refresh" );

Parameters:

Throws:

Parameters:

Throws:

Example

This example sets the section to the node in variable theNode and focuses that node. Data model nodes can be found directly from the treeNodeAdapter or from treeView#getNodes or treeView#getSelectedNodes.

$( ".selector" ).treeView( "setSelectedNodes", [theNode], true);

Parameters:

Examples

This example selects all the nodes 3 levels deep in the treeView. It uses knowledge of how the treeView renders node content by default, which could change in future release. Specifically it looks for the aria-level attribute. Note the "[aria-level='3']" selector will only find nodes that have been rendered, so will not find descendant nodes under nodes that have never been expanded.

$( ".selector" ).treeView( "setSelection", $( "[aria-level='3']" ).parent() );

This example selects all the nodes under the currently selected nodes. It expands the selected nodes first to make sure all descendant nodes are rendered. It suppresses the treeView#event:selectionChange event.

var tree$ = $( ".selector" ),
    selection$ = tree$.treeView( "getSelection" );
tree$.treeView( "expandAll", selection$ )
    .treeView( "setSelection", selection$.parent().find( ".a-TreeView-content" ), false, true );

This example clears the selection.

$( ".selector" ).treeView( "setSelection", $() );

Parameters:

Example

See treeView#getNodes for an example.

Parameters:

Returns:

Type

treeNodeAdapter

Examples

This example creates an adapter for nodes that don't have any identity (they have no id property). Also there is no type information.

var treeData = {
    label: "Root",
    children: [
        {
            label: "Child 1",
            children: [
                {
                    label: "Grandchild"
                }
            ]
        },
        {
            label: "Child 2",
            children: []
        }
    ]
};
var adapter = $.apex.treeView.makeDefaultNodeAdapter( treeData, null, false );

This example creates an adapter for nodes that do have identity. See also the example for treeView#getExpandedNodeIds.

var treeData = {
    id: "0001",
    label: "Root",
    children: [
        {
            id: "0009",
            label: "Child 1",
            children: [
                ...
            ]
        },
        ...
    ]
};
var adapter = $.apex.treeView.makeDefaultNodeAdapter( treeData );
// the following has the same effect
// var adapter = $.apex.treeView.makeDefaultNodeAdapter( treeData, null, true );

This example augments the returned adapter to support lazy loading node children.

var treeData = {
    id: "0001",
    label: "Root",
    children: [
        {
            id: "0009",
            label: "Child 1",
            children: null // this means lazy load the children
        },
        ...
    ]
};
var adapter = $.apex.treeView.makeDefaultNodeAdapter( treeData );
// Replace these functions to be aware of nodes that need lazy loading
//   no children property or children = [] means there are no children
//   children = null means the server has or may have more children
adapter.childCount = function( n ) {
    if ( n.children === null ) {
        return null;
    } // else
    return n.children ? n.children.length : 0;
};
adapter.hasChildren = function( n ) {
    if ( n.children === null ) {
        return null;
    } // else
    return n.children ? n.children.length > 0 : false;
};
// add this method to fetch children when node is first expanded
adapter.fetchChildNodes = function( n, callback ) {
    // Simulate adding lazy loaded nodes
    // This would normally be an ajax call such as apex.server.process
    // Typically send something like n.id to the server so it knows which children to return
    setTimeout(function() {
        // when the ajax call returns add the children to the parent (n).
        var c = n.children = [];
        // this example just adds dummy data
        c.push( {
            id: n.id + "_l1",
            label: "Lazy Child 1",
            children: [] // no children we're sure
        });
        c.push( {
            id: n.id + "_l2",
            label: "Lazy Child 2",
            children: null // there could be more lazy loaded children
        });
        // when the model data is updated let the treeView know
        callback( true );
    }, 800 );
};

This example adds a custom node rendering function to the adapter that puts the first letter of the label in bold tag.

...
var adapter = $.apex.treeView.makeDefaultNodeAdapter( treeData );
adapter.renderNodeContent = function( node, out, options, state ) {
    var label;
    if ( options.nodeSelector > 0 ) {
        // simulate a checkbox or radio button depending on single/multiple selection
        cls = "u-selector";
        if ( options.nodeSelector === 1 ) {
            cls += " u-selector--single";
        }
        out.markup('<span class="' + cls + '"></span>');
    }
    if ( adapter.getIcon ) {
        icon = adapter.getIcon( node );
        if ( icon !== null ) {
            out.markup( "<span" ).attr( "class", options.iconType + " " + icon ).markup( "></span>" );
        }
    }
    // format label
    label = apex.util.escapeHTML( adapter.getLabel( node ) );
    label = "<b>" + label.substring(0,1) + "</b>" + label.substring(1);
    // assume the node is not a link
    out.markup( "<span tabIndex='-1' role='treeitem'" )
        .attr( "class", options.labelClass )
        .attr( "aria-level", state.level )
        .attr( "aria-selected", state.selected ? "true" : "false" )
        .optionalAttr( "area-disabled", state.disabled ? "true" : null )
        .optionalAttr( "aria-expanded", state.hasChildren === false ? null : state.expanded ? "true" : "false" )
        .markup( ">" )
        .markup( label )
        .markup( "</span>" );
}