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

Additional Resources

• Drop Down overview
• Chip overview
• Tree overview
• Tree Grid overview

Our community is active and always welcoming to new ideas.

• Ignite UI for Angular Forums
• Ignite UI for Angular GitHub