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.
El IgxChipComponent se utiliza para mostrar los elementos seleccionados.
Selección
Para mostrar los nodos/filas seleccionados de la lista, utilice IgxChipComponent manejando los eventos que notifican los cambios de selección y completan la matriz selectedNodes / selectedRows. Esto se puede hacer suscribiéndose al evento nodeSelection de IgxTreeComponent y al evento rowSelectionChanging de IgxTreeGridComponent.
Para eliminar el chip del DOM y anular la selección del elemento del árbol/cuadrícula, debe manejar el evento remove de IgxChipComponent.
Además, una forma de evitar que el menú desplegable se cierre al eliminar el chip sería verificar la ruta compuesta del evento en busca de un igx-chip nodo y luego cancelar el evento en el IgxDropDownComponent 's closing controlador de eventos.
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