Gets or sets a value that determines whether users can drag and drop nodes within the TreeView.

Gets or sets a value that determines if sibling nodes should be collapsed when a node is expanded.

This property is set to true by default, because in most cases collapsing nodes that are not in use helps keep the UI clearer.

Gets an array containing the items that are currently checked.

The array returned includes only items that have no children. This is because checkboxes in parent items are used to check or uncheck the child items.

See also the showCheckboxes property and the checkedItemsChanged property.

For example:

var treeViewChk = new wijmo.input.TreeView('#gsTreeViewChk', {
   displayMemberPath: 'header',
   childItemsPath: 'items',
   showCheckboxes: true,
   itemsSource: items,
   checkedItemsChanged: function (s, e) {
       var items = s.checkedItems,
           msg = '';
       if (items.length) {
           msg = '<p><b>Selected Items:</b></p><ol>\r\n';
           for (var i = 0; i < items.length; i++) {
               msg += '<li>' + items[i].header + '</li>\r\n';
           }
           msg += '</ol>';
       }
       document.getElementById('gsTreeViewChkStatus').innerHTML = msg;
   }
});

Gets or sets the name of the property (or properties) that contains the child items for each node.

The default value for this property is the string 'items'.

In most cases, the property that contains the child items is the same for all data items on the tree. In these cases, set the childItemsPath to that name.

In some cases, however, items at different levels use different properties to store their child items. For example, you could have a tree with categories, products, and orders. In that case, you would set the childItemsPath to an array such as this:

// categories have products, products have orders:
tree.childItemsPath = [ 'Products', 'Orders' ];

Gets or sets the template used to instantiate FlexGrid controls.

Gets or sets the name of the property (or properties) to use as the visual representation of the nodes.

The default value for this property is the string 'header'.

In most cases, the property that contains the node text is the same for all data items on the tree. In these cases, set the displayMemberPath to that name.

In some cases, however, items at different levels use different properties to represent them. For example, you could have a tree with categories, products, and orders. In that case, you might set the displayMemberPath to an array such as this:

// categories, products, and orders have different headers:
tree.displayMemberPath = [ 'CategoryName', 'ProductName', 'OrderID' ];

Gets or sets a value that determines whether to expand collapsed nodes when the user clicks the node header.

Gets the DOM element that is hosting the control.

Gets or sets the name of the property (or properties) to use as a source of images for the nodes.

Gets or sets a value that indicates whether to use animations when expanding or collapsing nodes.

Gets or sets a value indicating whether items are bound to plain text or HTML.

Gets or sets a value that determines whether the control is disabled.

Disabled controls cannot get mouse or keyboard events.

Gets or sets a value that determines whether users can edit the text in the nodes.

When the isReadOnly property is set to false, users may edit the content of the tree nodes by typing directly into the nodes. The F2 key can also be used to enter edit mode with the whole node content selected.

You may customize the editing behavior using the following methods and events:

Methods: startEditing, finishEditing.

Events: nodeEditStarting, nodeEditStarted, nodeEditEnding, nodeEditEnded.

Gets a value that indicates whether the control is currently handling a touch event.

Gets a value that indicates whether the control is currently being updated.

Gets or sets the array that contains the TreeView items.

TreeView #see:itemsSource arrays usually have a hierarchical structure with items that contain child items. There is no fixed limit to the depth of the items.

For example, the array below would generate a tree with three top-level nodes, each with two child nodes:

var tree = new wijmo.input.TreeView('#treeView', {
    displayMemberPath: 'header',
    childItemsPath: 'items',
    itemsSource: [
        { header: '1 first', items: [
            { header: '1.1 first child' },
            { header: '1.2 second child' },
        ] },
        { header: '2 second', items: [
            { header: '3.1 first child' },
            { header: '3.2 second child' },
        ] },
        { header: '3 third', items: [
            { header: '3.1 first child' },
            { header: '3.2 second child' },
        ] }
    ]
});

Gets or sets a function that loads child nodes on demand.

The lazyLoadFunction takes two parameters: the node being expanded and a callback to be invoked when the data becomes available.

The callback function tells the TreeView that the node loading process has been completed. It should always be called, even if there are errors when loading the data.

For example:

var treeViewLazyLoad = new wijmo.input.TreeView('#treeViewLazyLoad', {
   displayMemberPath: 'header',
   childItemsPath: 'items',
   itemsSource: [ // start with three lazy-loaded nodes
       { header: 'Lazy Node 1', items: []},
       { header: 'Lazy Node 2', items: [] },
       { header: 'Lazy Node 3', items: [] }
   ],
   lazyLoadFunction: function (node, callback) {
       setTimeout(function () { // simulate http delay
           var result = [ // simulate result
               { header: 'Another lazy node...', items: [] },
               { header: 'A non-lazy node without children' },
               { header: 'A non-lazy node with child nodes', items: [
                 { header: 'hello' },
                 { header: 'world' }
               ]}
           ];
           callback(result); // return result to control
       }, 2500); // simulated 2.5 sec http delay
   }
});

Trees with lazy-loaded nodes have some restrictions: their nodes may not have checkboxes (see the showCheckboxes property) and the collpaseToLevel method will not expand collapsed nodes that have not been loaded yet.

Gets an array of TreeNode objects representing the nodes currently loaded.

Gets a value indicating whether the control is hosted in an element with right-to-left layout.

Gets or sets the data item that is currently selected.

Gets or sets the TreeNode that is currently selected.

Gets an array containing the text of all nodes from the root to the currently selected node.

Gets or sets a value that determines whether the TreeView should add checkboxes to nodes and manage their state.

This property can be used only on trees without lazy-loaded nodes (see the lazyLoadFunction property).

See also the checkedItems property and checkedItemsChanged event.

Gets the total number of items in the tree.