User Interaction
The TreeList widget supports single and multiple row selection. Use the selection.mode option to change the current mode.
jQuery
$(function() { $("#treeListContainer").dxTreeList({ selection: { mode: "single" // or "multiple" | "none" } }); });
Angular
<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 multiple mode, rows are supplied with check boxes for multiple selection. A check box in the first column's header allows a user to select all rows at once. Clicking this check box selects only those rows that meet the filtering conditions if a filter is applied.
You can disable the latter feature by setting the selection.allowSelectAll option to false.
jQuery
$(function() { $("#treeListContainer").dxTreeList({ selection: { mode: "multiple", allowSelectAll: false } }); });
Angular
<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 ], // ... })
Selection is non-recursive by default, that is, only the clicked row is selected. Assign true to the selection.recursive option to make selection recursive. After that, a click on a row also selects nested rows, and a click on the column header's check box selects all rows disregarding applied filters.
jQuery
$(function() { $("#treeListContainer").dxTreeList({ selection: { mode: "multiple", recursive: true } }); });
Angular
<dx-tree-list ... > <dxo-selection mode="multiple" [recursive]="true"> </dxo-selection> </dx-tree-list>
import { DxTreeListModule } from "devextreme-angular"; // ... export class AppComponent { // ... } @NgModule({ imports: [ // ... DxTreeListModule ], // ... })
Initial and Runtime Selection
Use the selectedRowKeys option to select rows initially. With non-recursive selection, one key selects one row; with recursive - a row with its nested rows. Note that you should specify row keys beforehand. You can do it in the key field of the store that underlies the dataSource. Alternatively, you can set the widget's keyExpr option. With hierarchical data, keys can be generated automatically if the key and keyExpr are not set.
jQuery
$(function() { $("#treeListContainer").dxTreeList({ // ... dataSource: { store: { // ... key: "id" } }, selectedRowKeys: [1, 5, 18] }); });
Angular
<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 using 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
var selectSingleRow = function (treeListInstance, key, preserve) { if (!treeListInstance.isRowSelected(key)) { treeListInstance.selectRows([key], preserve); } }
treeList.selectAll();
Angular
import { ..., ViewChild } from "@angular/core"; import { DxTreeListModule, DxTreeListComponent } from "devextreme-angular"; // ... export class AppComponent { @ViewChild(DxTreeListComponent, { static: false }) treeList: DxTreeListComponent; // Prior to Angular 8 // @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 ], // ... })
Call the getSelectedRowKeys(mode) or getSelectedRowsData() method to get the selected rows' keys or data.
jQuery
var treeList = $("#treeListContainer").dxTreeList("instance"); var selectedKeys = treeList.getSelectedRowKeys("all"); // or "excludeRecursive" | "leavesOnly" var selectedData = treeList.getSelectedRowsData();
Angular
import { ..., ViewChild } from "@angular/core"; import { DxTreeListModule, DxTreeListComponent } from "devextreme-angular"; // ... export class AppComponent { @ViewChild(DxTreeListComponent, { static: false }) treeList: DxTreeListComponent; // Prior to Angular 8 // @ViewChild(DxTreeListComponent) treeList: DxTreeListComponent; getSelectedRowKeys () { return this.treeList.instance.getSelectedRowKeys("all"); // or "excludeRecursive" | "leavesOnly" } getSelectedRowsData () { return this.treeList.instance.getSelectedRowsData(); } } @NgModule({ imports: [ // ... DxTreeListModule ], // ... })
Clear Selection Settings
Call the deselectRows(keys) method to clear the selection of specific rows. With the non-recursive selection, one key deselects one row; with recursive - a row with its nested rows.
jQuery
$("#treeListContainer").dxTreeList("deselectRows", [1, 4, 10]);
Angular
import { ..., ViewChild } from "@angular/core"; import { DxTreeListModule, DxTreeListComponent } from "devextreme-angular"; // ... export class AppComponent { @ViewChild(DxTreeListComponent, { static: false }) treeList: DxTreeListComponent; // Prior to Angular 8 // @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 the selection of all rows regardless of their visibility, call the clearSelection() method.
jQuery
var treeList = $("#treeListContainer").dxTreeList("instance"); treeList.deselectAll(); treeList.clearSelection();
Angular
import { ..., ViewChild } from "@angular/core"; import { DxTreeListModule, DxTreeListComponent } from "devextreme-angular"; // ... export class AppComponent { @ViewChild(DxTreeListComponent, { static: false }) treeList: DxTreeListComponent; // Prior to Angular 8 // @ViewChild(DxTreeListComponent) treeList: DxTreeListComponent; deselectVisibleRows () { this.treeList.instance.deselectAll(); } deselectAllRows () { this.treeList.instance.clearSelection(); } } @NgModule({ imports: [ // ... DxTreeListModule ], // ... })
See Also
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
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
$(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
<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.
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
- Handle Events: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
If you have technical questions, please create a support ticket in the DevExpress Support Center.