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

The default value for this property is **false**.

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

The default value for this property is **true**, because in most cases collapsing nodes that are not in use helps keep the UI clean.

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 event.

For example:

import { TreeView } from '@mescius/wijmo.nav';
var treeViewChk = new 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) to bind to the node's checked state.

See also the showCheckboxes property and the checkedItemsChanged event.

Gets or sets a value that determines whether to toggle checkboxes when the user clicks the node header.

The default value for this property is **false**, which causes checkboxes to be toggled only when the user clicks the checkbox itself (not the node header).

See also the showCheckboxes property and the checkedItemsChanged event.

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 a value that determines whether to collapse expanded nodes when the user clicks the node header.

The default value for this property is **false**.

When this property is set to **false**, users have to click the expand/collapse icons to collapse the node. Clicking the node header will select the node if it is not selected, and will start editing the node if it is selected (and if the isReadOnly property is set to false).

See also the expandOnClick property.

Gets or sets a value that determines whether nodes should be collapsed when they are disabled.

The default value for this property is **true**.

Gets or sets the template used to instantiate TreeView 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.

The default value for this property is **true**.

When this property is set to **false**, users have to click the expand/collapse icons to collapse the node. Clicking the node header will select the node if it is not selected, and will start editing the node if it is selected (and if the isReadOnly property is set to false).

See also the collapseOnClick property.

Gets or sets a value that determines whether to automatically expand the first node when the tree is loaded.

The default value for this property is **true**. If you set it to false, all nodes will be initially collapsed.

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

The default value for this property is an empty string, which means no images are added to the nodes.

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

The default value for this property is **true**.

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

The default value for this property is **false**.

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.

The default value for this property is **true**.

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:

import { TreeView } from '@mescius/wijmo.nav';
var tree = new 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:

import { TreeView } from '@mescius/wijmo.nav';
var treeViewLazyLoad = new 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 collapseToLevel method will not expand collapsed nodes that have not been loaded yet.

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

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.

The default value for this property is **false**.

Gets the total number of items in the tree.