Multi-select Hierarchical Drop Down
The following samples demonstrate how to create a multi-select hierarchical drop-down that allows the user to select single or multiple options from a tree-style hierarchical drop-down list.
Topic Overview
For the drop-down list we will use the IgxDropDownComponent as well as the IgxToggleActionDirective to open/close the drop-down.
To visualize the hierarchical data in the drop-down, you can use either the IgxTreeComponent or the IgxTreeGridComponent.
The IgxChipComponent
is used to display the selected items.
Selection
To display selected nodes/rows from the list use the IgxChipComponent
by handling the events that notify of selection changes and populate the selectedNodes
/ selectedRows
array. This can be done by subscribing to the IgxTreeComponent's nodeSelection
event and to the IgxTreeGridComponent's rowSelectionChanging
event.
To remove the chip from the DOM and deselect the item from the tree/grid, you have to handle the IgxChipComponent's remove
event.
Additionally, a way to prevent the drop-down from closing on chip deletion would be to check the event's composite path for an igx-chip
node and then cancel the event in the IgxDropDownComponent
's closing
event handler.
Demo
Note
To display the Dropdown component opened initially, it is recommended to set the open method as a callback of the requestAnimationFrame method. This will ensure that the DOM tree is repainted and all elements are correctly positioned.
API References
- IgxDropDownComponent
- IgxChipComponent
- IgxChipsAreaComponent
- IgxTreeComponent
- IgxTreeNodeComponent
- IgxTreeGridComponent