Menú desplegable jerárquico de selección múltiple
Los siguientes ejemplos demuestran cómo crear un menú desplegable jerárquico de selección múltiple que permite al usuario seleccionar una o varias opciones de una lista desplegable jerárquica de estilo árbol.
Topic Overview
Para la lista desplegable usaremos IgxDropDownComponent así como IgxToggleActionDirective para abrir/cerrar el menú desplegable.
Para visualizar los datos jerárquicos en el menú desplegable, puede utilizar IgxTreeComponent o IgxTreeGridComponent.
The IgxChipComponent is used to display the selected items.
Selección
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
Para mostrar el componente desplegable abierto inicialmente, se recomienda establecer el método open como una devolución de llamada del método requestAnimationFrame. Esto asegurará que el árbol DOM se vuelva a pintar y que todos los elementos estén colocados correctamente.
API References
- Componente IgxDropDown
- Componente IgxChip
- Componente IgxChipsArea
- Componente IgxTree
- Componente IgxTreeNode
- Componente IgxTreeGrid
Additional Resources
- Resumen desplegable
- Descripción general de los chips
- Descripción general del árbol
- Descripción general de la cuadrícula de árbol
GitHub