TreeView Class

The default value for this property is false.

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

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.

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 '@grapecity/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;
   }
});

See also the showCheckboxes property and the checkedItemsChanged event.

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' ];

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.

The default value for this property is true.

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' ];

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.

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

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

The default value for this property is true.

The default value for this property is false.

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.

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 '@grapecity/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' },
        ] }
    ]
});

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 '@grapecity/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.

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.