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.
SeIgxChipComponent utiliza para mostrar los elementos seleccionados.
Selección
Para mostrar nodos/filas seleccionadas de la lista, utiliza elIgxChipComponent manejando los eventos que notifican cambios en la selección y llenan elselectedNodes /selectedRows array. Esto se puede hacer suscribiéndose al evento denodeSelection IgxTreeComponent y al evento derowSelectionChanging IgxTreeGridComponent.
Para quitar el chip del DOM y deseleccionar el elemento del árbol/cuadrícula, tienes que gestionar el evento de IgxChipComponentremove.
Además, una forma de evitar que el desplegable se cierre al eliminar el chip sería comprobar la ruta compuesta del evento para unigx-chip nodo y luego cancelar el evento enIgxDropDownComponent el manejador de eventosclosing.
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