다중 선택 계층적 드롭다운

    다음 샘플은 사용자가 트리 스타일 계층적 드롭다운 목록에서 단일 또는 여러 옵션을 선택할 수 있는 다중 선택 계층적 드롭다운을 만드는 방법을 보여줍니다.

    Topic Overview

    드롭다운 목록의 경우 IgxDropDownComponent와 IgxToggleActionDirective를 사용하여 드롭다운을 열고 닫습니다.

    드롭다운에서 계층적 데이터를 시각화하려면 IgxTreeComponent 또는 IgxTreeGridComponent 를 사용할 수 있습니다.

    ​IgxChipComponent는 선택한 항목을 표시하는 데 사용됩니다.

    선택

    목록에서 선택한 노드/행을 표시하려면 IgxChipComponent 선택 변경 사항을 알리고 채우는 이벤트를 처리하여 selectedNodes / selectedRows 정렬. 이는 IgxTreeComponent의 구독을 통해 수행할 수 있습니다. nodeSelection 이벤트 및 IgxTreeGridComponent의 rowSelectionChanging 이벤트.

    DOM에서 칩을 제거하고 트리/그리드에서 항목을 선택 취소하려면 IgxChipComponent의 remove 이벤트를 처리해야 합니다.

    또한 칩 삭제 시 드롭다운이 닫히는 것을 방지하는 방법은 igx-chip 노드에 대한 이벤트의 복합 경로를 확인한 다음 IgxDropDownComponent의 closing 이벤트 핸들러에서 이벤트를 취소하는 것입니다.

    Demo

    Note

    처음에 열린 Dropdown 구성 요소를 표시하려면 open 메서드를 requestAnimationFrame 메서드의 콜백으로 설정하는 것이 좋습니다. 이렇게 하면 DOM 트리가 다시 그려지고 모든 요소가 올바르게 배치됩니다.

    API References

    Additional Resources

    우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.