Use Multiple Selections in a Tree Control
Use Multiple Selections in a Tree Control
Technologies >Software Engineering >Software Engineer Views >Tree Views >Tree View with Multiple Selection Checkboxes.
The tree control can optionally display multiple selection checkboxes. The user can select each tree level individually. For example, in the tree control that displays countries, cities, and buildings, you can enable checkboxes for cities and buildings but disable them for countries.
If the user selects a parent tree node (such as, a city) checkbox, the control automatically selects all children tree nodes (such as,. buildings) checkboxes. If the user unselects the parent checkbox, the control automatically unselects all children checkboxes.
If the user manually selects all children checkboxes, the control automatically selects the parent checkbox. If the user unselects any child checkbox, the control automatically unselects the parent checkbox.
Methods
This feature must be programmed from JavaScript code. It can be used as follows:
Selecting all checkboxes
You can select or unselect all checkboxes in the tree:
tree.selectAll();
tree.unselectAll();
Multiple selection checkboxes are disabled
By default, multiple selection checkboxes are disabled. You can enable checkboxes for any level in the tree control. This method must be called before the tree control loads its data, that is, in the
afterViewLoad
event handler
// enable multiple selection for the second and third levels
tree.setMultipleSelectionEnabled(1);
tree.setMultipleSelectionEnabled(2)
JS event listener
You can add a JS event listener that the tree control will call each time a checkbox is selected or unselected. The example below uses a controller method as a listener:
tree.addEventListener('onChangeMultipleSelection',
this.onChangeMultipleSelection.createDelegate(this));
The tree control will pass the selected or unselected tree node (instance of
Ab.tree.TreeNode
) to the event listener as an argument:
onChangeMultipleSelection: function(treeNode) {
...
},
The tree node object has the selected property that you can examine:
if (treeNode.isSelected()) ...
Checkbox state
You can set any checkbox state:
// select all children nodes of this node
for (var i = 0; i < treeNode.children.length; i++) {
treeNode.children[i].setSelected(true);
}
List of selected checkboxes
You can get the list of selected checkboxes for any tree level.
var selectedBuildingNodes = tree.getSelectedNodes(2);
The
getSelectedNodes()
method returns tree nodes (instances of
Ab.tree.TreeNode
) selected at specified tree level, regardless of their parent. For example, the user might select buildings under different cities, and the method will return all selected building nodes.
Similarly, you can get the list of data records with primary keys (instances of
Ab.data.DataRecord
) for all selected checkboxes – again, for specified tree level:
var selectedRecords = tree.getSelectedRecords(2);