TreeView control

Last Update: 9/26/2016

See Use treeview for basic usage and advanced samples.

Create a treeview

TypeScript

import Controls = require("VSS/Controls");
import TreeView = require("VSS/Controls/TreeView");

// Create the treeView in a container element
var treeview = Controls.create(TreeView.TreeView, container, options);

JavaScript

require(["VSS/Controls", "VSS/Controls/TreeView"], function(Controls, TreeView) {
    // Create the treeView in a container element
    var treeview = Controls.create(TreeView.TreeView, container, options);
});

Options

     {
        nodes: {TreeNode[]},
        showIcons: {boolean},
        clickToggles: {boolean},
        clickSelects: {boolean},
        droppable: {any},
        draggable: {any},
        useBowtieStyle: {boolean}
    }
Option Type Default Notes
nodes TreeNode[] List of nodes used by TreeView for rendering. TreeView only accepts nodes of concrete type TreeNode. Existing node hierarchy needs to be converted to TreeNode before providing to TreeView, see samples for details.
showIcons boolean true Determines whether icons of the nodes are visible or not.
clickToggles boolean false Determines whether clicking a node expands/collapses the node or not (if the node has children).
clickSelects boolean true Determines whether clicking a node selects the node or not.
droppable any Defines "droppable" options for drag and drop (see jQuery UI droppable options)
draggable any Defines "draggable" options for drag and drop (see jQuery UI draggable options)
useBowtieStyle boolean false Specifies whether to use the modern bowtie styling (bowtie styles are in preview and subject to change).

Methods

getSelectedNode()

Gets the currently selected node.

Returns

TreeNode

setSelectedNode()

Sets the specified node as selected.

Returns

void

Parameters

  • node: TreeNode. Node to be selected.
  • suppressChangeEvent: boolean. Optional. If specified true, "selectionChanged" event will not fire.

removeNode()

Removes the specified node from the tree.

Returns

void

Parameters

  • node: TreeNode. Node to be removed.

updateNode()

Update the specified node by refreshing the child nodes if anything is added or removed.

Returns

void

Parameters

  • node: TreeNode. Node to be updated.

getNodeFromElement()

Gets the node associated with the provided DOM/JQuery element.

Returns

TreeNode

Parameters

  • element: any. Element to get the node for.