Selection

User Interaction

The TreeList widget supports single and multiple row selection. Use the selection.mode option to change the current mode.

jQuery
JavaScript
$(function() {
    $("#treeListContainer").dxTreeList({
        selection: {
            mode: "single" // or "multiple" | "none"
        }
    });
});
Angular
HTML
TypeScript
<dx-tree-list ... >
    <dxo-selection
        mode="single"> <!-- "multiple" | "none" -->
    </dxo-selection>
</dx-tree-list>
import { DxTreeListModule } from 'devextreme-angular';
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxTreeListModule
    ],
    // ...
})

In the single mode, only one row can be selected at a time. In the multiple mode, rows are supplied with check boxes for multiple selection. A check box in the header of the first column allows a user to select all rows at once. Clicking this check box selects only those rows that meet filtering conditions if a filter is applied.

DevExtreme HTML5 JavaScript jQuery Angular Knockout Widget TreeList Sorting

You can disable the latter capability by setting the selection.allowSelectAll option to false.

jQuery
JavaScript
$(function() {
    $("#treeListContainer").dxTreeList({
        selection: {
            mode: "multiple",
            allowSelectAll: false
        }
    });
});
Angular
HTML
TypeScript
<dx-tree-list ... >
    <dxo-selection
        mode="multiple"
        [allowSelectAll]="false">
    </dxo-selection>
</dx-tree-list>
import { DxTreeListModule } from 'devextreme-angular';
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxTreeListModule
    ],
    // ...
})

Note that selection in any mode is non-recursive, which means that when a user selects a row, its nested rows remain unselected.

Single Selection Demo Multiple Selection Demo

API

Initial and Runtime Selection

Use the selectedRowKeys option to select rows initially. Note that to access a row by its key, you should specify the key option in the Store that underlies the dataSource.

jQuery
JavaScript
$(function() {
    $("#treeListContainer").dxTreeList({
        // ...
        dataSource: {
            store: {
                // ...
                key: "id"
            }
        },
        selectedRowKeys: [1, 5, 18]
    });
});
Angular
HTML
TypeScript
<dx-tree-list
    [dataSource]="treeListDataSource"
    [selectedRowKeys]="[1, 5, 18]">
</dx-tree-list>
import { DxTreeListModule } from 'devextreme-angular';
import DataSource from 'devextreme/data/data_source';
import 'devextreme/data/array_store';
// or
// import 'devextreme/data/odata/store';
// import 'devextreme/data/custom_store';
// ...
export class AppComponent {
    treeListDataSource = new DataSource({
        store: {
            // ...
            key: "id"
        }
    });
}
@NgModule({
    imports: [
        // ...
        DxTreeListModule
    ],
    // ...
})

You can select rows at runtime as well with the selectRows(keys, preserve) method. Note that the preserve argument, which tells the widget whether to keep or clear the previous selection, is false by default. Before selecting a row, you can call the isRowSelected(key) method to check if this row is already selected. If you need to select all rows at once, call the selectAll() method.

jQuery
JavaScript
var selectSingleRow = function (treeListInstance, key, preserve) {
    if (!treeListInstance.isRowSelected(key)) {
        treeListInstance.selectRows([key], preserve);
    }
}
JavaScript
treeList.selectAll();
Angular
TypeScript
import { ..., ViewChild } from '@angular/core';
import { DxTreeListModule, DxTreeListComponent } from 'devextreme-angular';
// ...
export class AppComponent {
    @ViewChild(DxTreeListComponent) treeList: DxTreeListComponent;
    selectSingleRow (key, preserve) {
        if (!this.treeList.instance.isRowSelected(key)) {
            this.treeList.instance.selectRows([key], preserve);
        }
    }
    selectAllRows () {
        this.treeList.instance.selectAll();
    }
}
@NgModule({
    imports: [
        // ...
        DxTreeListModule
    ],
    // ...
})

To get the keys or data of the selected rows, call the getSelectedRowKeys() or getSelectedRowsData() method, respectively.

jQuery
JavaScript
var treeList = $("#treeListContainer").dxTreeList("instance");
var selectedKeys = treeList.getSelectedRowKeys();
var selectedData = treeList.getSelectedRowsData();
Angular
TypeScript
import { ..., ViewChild } from '@angular/core';
import { DxTreeListModule, DxTreeListComponent } from 'devextreme-angular';
// ...
export class AppComponent {
    @ViewChild(DxTreeListComponent) treeList: DxTreeListComponent;
    getSelectedRowKeys () {
        return this.treeList.instance.getSelectedRowKeys();
    }
    getSelectedRowsData () {
        return this.treeList.instance.getSelectedRowsData();
    }
}
@NgModule({
    imports: [
        // ...
        DxTreeListModule
    ],
    // ...
})

Clear Selection Settings

Call the deselectRows(keys) method to clear the selection of specific rows.

jQuery
JavaScript
$("#treeListContainer").dxTreeList("deselectRows", [1, 4, 10]);
Angular
TypeScript
import { ..., ViewChild } from '@angular/core';
import { DxTreeListModule, DxTreeListComponent } from 'devextreme-angular';
// ...
export class AppComponent {
    @ViewChild(DxTreeListComponent) treeList: DxTreeListComponent;
    deselectRows (keys) {
        this.treeList.instance.deselectRows(keys);
    }
}
@NgModule({
    imports: [
        // ...
        DxTreeListModule
    ],
    // ...
})

The deselectAll() method clears selection of all visible rows, and can be used when you apply a filter and want to keep the selection of invisible rows that do not meet the filtering conditions. To clear selection of all rows regardless of their visibility, call the clearSelection() method.

jQuery
JavaScript
var treeList = $("#treeListContainer").dxTreeList("instance");
treeList.deselectAll();
treeList.clearSelection();
Angular
TypeScript
import { ..., ViewChild } from '@angular/core';
import { DxTreeListModule, DxTreeListComponent } from 'devextreme-angular';
// ...
export class AppComponent {
    @ViewChild(DxTreeListComponent) treeList: DxTreeListComponent;
    deselectVisibleRows () {
        this.treeList.instance.deselectAll();
    }
    deselectAllRows () {
        this.treeList.instance.clearSelection();
    }
}
@NgModule({
    imports: [
        // ...
        DxTreeListModule
    ],
    // ...
})
See Also

Events

The TreeList widget raises the selectionChanged event when a row is selected or when the selection is cancelled. If the function that handles this event is going to remain unchanged, assign it to the onSelectionChanged option when you configure the widget.

jQuery
JavaScript
$(function() {
    $("#treeListContainer").dxTreeList({
        onSelectionChanged: function(e) { // Handler of the "selectionChanged" event
            var currentSelectedRowKeys = e.currentSelectedRowKeys;
            var currentDeselectedRowKeys = e.currentDeselectedRowKeys;
            var allSelectedRowKeys = e.selectedRowKeys;
            var allSelectedRowsData = e.selectedRowsData;
            // ...
        }
    });
});
Angular
HTML
TypeScript
<dx-tree-list ...
    (onSelectionChanged)="onSelectionChanged($event)">
</dx-tree-list>
import { DxTreeListModule } from 'devextreme-angular';
// ...
export class AppComponent {
    onSelectionChanged (e) { // Handler of the "selectionChanged" event
        let currentSelectedRowKeys = e.currentSelectedRowKeys;
        let currentDeselectedRowKeys = e.currentDeselectedRowKeys;
        let allSelectedRowKeys = e.selectedRowKeys;
        let allSelectedRowsData = e.selectedRowsData;
        // ...
    }
}
@NgModule({
    imports: [
        // ...
        DxTreeListModule
    ],
    // ...
})

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 selectionChangedEventHandler1 = function(e) {
    // First handler of the "selectionChanged" event
};

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

$("#treeListContainer").dxTreeList("instance")
    .on("selectionChanged", selectionChangedEventHandler1)
    .on("selectionChanged", selectionChangedEventHandler2);
See Also