|
1 | | -To select a node, users can click a checkbox next to it. Set the [showCheckBoxesMode](/Documentation/ApiReference/UI_Components/dxTreeView/Configuration/#showCheckBoxesMode) to *"normal"* or *"selectAll"* to display node checkboxes. The *"selectAll"* mode also enables a checkbox that selects all nodes simultaneously. If [selectByClick](/Documentation/ApiReference/UI_Components/dxTreeView/Configuration/#selectByClick) is enabled, users can click nodes to select them. |
| 1 | +The DevExtreme [TreeView](/Documentation/Guide/UI_Components/TreeView/Overview/) allows users to select nodes (on click or using checkboxes). In this demo, selected items appear as a flat (non-hierarchical) [List](/Documentation/Guide/UI_Components/List/Overview/). |
2 | 2 | <!--split--> |
3 | 3 |
|
4 | | -Use the following TreeView properties to adjust selection: |
5 | | - |
6 | | -- [selectionMode](/Documentation/ApiReference/UI_Components/dxTreeView/Configuration/#selectionMode) |
7 | | -Specifies whether multiple node selection is allowed. |
| 4 | +Use controls below the TreeView to modify selection behavior as follows: |
8 | 5 |
|
9 | | -- [selectNodesRecursive](/Documentation/ApiReference/UI_Components/dxTreeView/Configuration/#selectNodesRecursive) |
10 | | -Specifies whether nested nodes are selected together with their parent. |
| 6 | +- Specify [selection mode](/Documentation/ApiReference/UI_Components/dxTreeView/Configuration/#selectionMode) for enabled and [disabled nodes](/Documentation/ApiReference/UI_Components/dxTreeView/Configuration/#disabledNodeSelectionMode) |
| 7 | +- Toggle visibility of [selection checkboxes](/Documentation/ApiReference/UI_Components/dxTreeView/Configuration/#showCheckBoxesMode) (including the Select All option) |
| 8 | +- Allow [selection on click](/Documentation/ApiReference/UI_Components/dxTreeView/Configuration/#selectByClick) |
| 9 | +- Disable [recursive selection](/Documentation/ApiReference/UI_Components/dxTreeView/Configuration/#selectNodesRecursive). |
11 | 10 |
|
12 | | -- [selectedExpr](/Documentation/ApiReference/UI_Components/dxTreeView/Configuration/#selectedExpr) |
13 | | -A data field that allows you to pre-select a node. In this demo, the data field is called **selected**, and it is set to **true** for the "Victor Norris" node (see the data source). |
| 11 | +The TreeView allows you to update node selection states programmatically. You can select/deselect items by [node keys](/Documentation/ApiReference/UI_Components/dxTreeView/Methods/#selectItemkey), [data objects](/Documentation/ApiReference/UI_Components/dxTreeView/Methods/#selectItemitemData), or [DOM elements](/Documentation/ApiReference/UI_Components/dxTreeView/Methods/#selectItemitemElement). To initially select nodes, configure [selection fields](/Documentation/ApiReference/UI_Components/dxTreeView/Configuration/#selectedExpr) within item objects (default: **selected**). |
14 | 12 |
|
15 | | -- [onSelectionChanged](/Documentation/ApiReference/UI_Components/dxTreeView/Configuration/#onSelectionChanged) |
16 | | -A function that allows you to handle selection changes. In this demo, it is used to synchronize the List with the TreeView. |
17 | | - |
18 | | -The TreeView also provides the following methods to manage selection programmatically: |
19 | | - |
20 | | -- **selectItem** / **unselectItem** |
21 | | -Selects or unselects a single node. Accepts the [node key](/Documentation/ApiReference/UI_Components/dxTreeView/Methods/#selectItemkey), [data object](/Documentation/ApiReference/UI_Components/dxTreeView/Methods/#selectItemitemData), or [DOM node](/Documentation/ApiReference/UI_Components/dxTreeView/Methods/#selectItemitemElement). |
22 | | - |
23 | | -- [selectAll()](/Documentation/ApiReference/UI_Components/dxTreeView/Methods/#selectAll) / [unselectAll()](/Documentation/ApiReference/UI_Components/dxTreeView/Methods/#unselectAll) |
24 | | -Selects or unselects all nodes. |
25 | | - |
26 | | -- [getSelectedNodes()](/Documentation/ApiReference/UI_Components/dxTreeView/Methods/#getSelectedNodes) / [getSelectedNodeKeys()](/Documentation/ApiReference/UI_Components/dxTreeView/Methods/#getSelectedNodeKeys) |
27 | | -Gets the selected nodes or their keys. In this demo, **getSelectedNodes()** is used to prepare data for the List. |
28 | | - |
29 | | -This demo also shows how to specify an [itemTemplate](/Documentation/ApiReference/UI_Components/dxTreeView/Configuration/#itemTemplate) for node customization. Node data is passed to the template as an argument. |
| 13 | +You can use data fields to customize items as your requirements dictate. This demo implements [itemTemplate](/Documentation/ApiReference/UI_Components/dxTreeView/Configuration/#itemTemplate) to merge text from multiple fields: you do not need to specify the [text](/Documentation/ApiReference/UI_Components/dxTreeView/Configuration/items/#text) field in the TreeView data source. |
0 commit comments