Lista suspensa hierárquica de seleção múltipla
Os exemplos a seguir demonstram como criar uma lista suspensa hierárquica de seleção múltipla que permite ao usuário selecionar uma ou várias opções em uma lista suspensa hierárquica em estilo de árvore.
Topic Overview
Para a lista suspensa, usaremos o IgxDropDownComponent, bem como o IgxToggleActionDirective para abrir/fechar a lista suspensa.
Para visualizar os dados hierárquicos na lista suspensa, você pode usar o IgxTreeComponent ou o IgxTreeGridComponent.
O IgxChipComponent é usado para exibir os itens selecionados.
Escolha
Para exibir nós/linhas selecionados da lista, use o IgxChipComponent manipulando os eventos que notificam as alterações de seleção e preenchem o selectedNodes array/ selectedRows. Isso pode ser feito assinando o evento do nodeSelection IgxTreeComponent e o evento do rowSelectionChanging IgxTreeGridComponent.
Para remover o chip do DOM e desmarcar o item da árvore/grade, você precisa manipular o evento do remove IgxChipComponent.
Além disso, uma maneira de evitar que a lista suspensa feche na exclusão do chip seria verificar o caminho composto do evento para um igx-chip nó e, em seguida, cancelar o evento no IgxDropDownComponent manipulador de closing eventos.
Demo
Note
Para exibir o componente Dropdown aberto inicialmente, é recomendado definir o método open como um retorno de chamada do método requestAnimationFrame. Isso garantirá que a árvore DOM seja repintada e que todos os elementos sejam posicionados corretamente.
API References
- Componente IgxDropDown
- Componente IgxChip
- Componente de área de chips Igx
- IgxTreeComponent
- Componente IgxTreeNodeComponent
- Componente IgxTreeGrid
Additional Resources
- Visão geral do menu suspenso
- Visão geral do chip
- Visão geral da árvore
- Visão geral da grade de árvore
GitHub