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 DropDown 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 Tree or the TreeGrid.
The Chip is used to display the selected items.
Selection
To display selected nodes/rows from the list use the Chip 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
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
Additional Resources
Our community is active and always welcoming to new ideas.