Select Nodes

Initially

If a node is supposed to be selected initially, set its selected field to true. This is a conventional field name defined by the Default Item Template pattern. If another field specifies whether a node is selected or not, assign its name to the selectedExpr option as shown in the following code.

jQuery
JavaScript
var hierarchicalData = [{
    name: 'Fruits',
    isSelected: true,
    items: [
        { name: 'Apples' },
        { name: 'Oranges' }
    ]
}, {
    name: 'Vegetables',
    isSelected: true,
    items: [
        { name: 'Cucumbers' },
        { name: 'Tomatoes' }
    ]
}];

$(function() {
    $("#treeViewContainer").dxTreeView({
        dataSource: hierarchicalData,
        keyExpr: 'name',
        displayExpr: 'name',
        selectedExpr: 'isSelected',
        showCheckBoxesMode: 'normal'
    });
});
Angular
HTML
TypeScript
<dx-tree-view
    [dataSource]="hierarchicalData"
    keyExpr="name"
    displayExpr="name"
    selectedExpr="isSelected"
    showCheckBoxesMode="normal">
</dx-tree-view>
import { DxTreeViewModule } from 'devextreme-angular';
// ...
export class AppComponent {
    hierarchicalData = [{
        name: 'Fruits',
        isSelected: true,
        items: [
            { name: 'Apples' },
            { name: 'Oranges' }
        ]
    }, {
        name: 'Vegetables',
        isSelected: true,
        items: [
            { name: 'Cucumbers' },
            { name: 'Tomatoes' }
        ]
    }];
}
@NgModule({
    imports: [
        // ...
        DxTreeViewModule
    ],
    // ...
})

Using the API

To select or cancel the selection of a node programmatically, call the selectItem(itemElement) or unselectItem(itemElement) method passing the key of the node as a parameter.

jQuery
JavaScript
$("#treeViewContainer").dxTreeView("selectItem", nodeKey);
// $("#treeViewContainer").dxTreeView("unselectItem", nodeKey);
Angular
TypeScript
import { ..., ViewChild } from '@angular/core';
import { DxTreeViewModule, DxTreeViewComponent } from 'devextreme-angular';
// ...
export class AppComponent {
    @ViewChild(DxTreeViewComponent) treeView: DxTreeViewComponent;
    selectNode (key) {
        this.treeView.instance.selectItem(key);
    }
    unselectNode (key) {
        this.treeView.instance.unselectItem(key);
    }
}
@NgModule({
    imports: [
        // ...
        DxTreeViewModule
    ],
    // ...
})

To select or cancel the selection of all nodes programmatically, call the selectAll() or unselectAll() method.

jQuery
JavaScript
$("#treeViewContainer").dxTreeView("selectAll");
// $("#treeViewContainer").dxTreeView("unselectAll");
Angular
TypeScript
import { ..., ViewChild } from '@angular/core';
import { DxTreeViewModule, DxTreeViewComponent } from 'devextreme-angular';
// ...
export class AppComponent {
    @ViewChild(DxTreeViewComponent) treeView: DxTreeViewComponent;
    selectAllNodes () {
        this.treeView.instance.selectAll();
    }
    unselectAllNodes () {
        this.treeView.instance.unselectAll();
    }
}
@NgModule({
    imports: [
        // ...
        DxTreeViewModule
    ],
    // ...
})
NOTE
If the showCheckBoxesMode is "none", nodes selected using the API do not differ from unselected nodes in appearance.

User Interaction

If only a single node should be in the selected state at a time, set the selectByClick option to true. In this case, an end user can select a node simply by clicking it.

jQuery
JavaScript
$(function() {
    $("#treeViewContainer").dxTreeView({
        // ...
        selectByClick: true
    });
});
Angular
HTML
TypeScript
<dx-tree-view ...
    [selectByClick]="true">
</dx-tree-view>
import { DxTreeViewModule } from 'devextreme-angular';
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxTreeViewModule
    ],
    // ...
})

If in your scenario, several nodes could be in the selected state at a time, set the showCheckBoxesMode option to "normal". This setting supplies each node with a check box that selects this node. If in addition, a user should be able to select all nodes at once, set the showCheckBoxesMode option to "selectAll".


jQuery
JavaScript
$(function() {
    $("#treeViewContainer").dxTreeView({
        // ...
        showCheckBoxesMode: 'normal' // or 'selectAll'
    });
});
Angular
HTML
TypeScript
<dx-tree-view ...
    showCheckBoxesMode="normal"> <!-- or "selectAll" -->
</dx-tree-view>
import { DxTreeViewModule } from 'devextreme-angular';
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxTreeViewModule
    ],
    // ...
})

View Demo

Events

To execute certain commands when a node's selected state is changed, handle the itemSelectionChanged event. Assign an event handling function to the onItemSelectionChanged option when you configure the widget if this function is going to remain unchanged.

jQuery
JavaScript
$(function() {
    $("#treeViewContainer").dxTreeView({
        onItemSelectionChanged: function (e) {
            // Handler of the "itemSelectionChanged" event
        }
    });
});
Angular
HTML
TypeScript
<dx-tree-view ...
    (onItemSelectionChanged)="onItemSelectionChanged($event)">
</dx-tree-view>
import { DxTreeViewModule } from 'devextreme-angular';
// ...
export class AppComponent {
    onItemSelectionChanged (e) {
        // Handler of the "itemSelectionChanged" event
    }
}
@NgModule({
    imports: [
        // ...
        DxTreeViewModule
    ],
    // ...
})

If you are going to change the event handler at runtime, or if you need to attach several handlers to the event, subscribe to it using the on(eventName, eventHandler) method. This approach is more typical of jQuery.

JavaScript
var itemSelectionChangedHandler1 = function (e) {
    // First handler of the "itemSelectionChanged" event
};

var itemSelectionChangedHandler2 = function (e) {
    // Second handler of the "itemSelectionChanged" event
};

$("#treeViewContainer").dxTreeView("instance")
    .on("itemSelectionChanged", itemSelectionChangedHandler1)
    .on("itemSelectionChanged", itemSelectionChangedHandler2);

View Demo

See Also