Hello Rameez,

Thank you for posting to Infragistics Community!

I have been looking at your question and I have prepared a small sample trying to reproduce the described behavior. What I could say is that the IgxSelectComponent and IgxComboComponent are not suitable when displaying hierarchical data and what I could suggest is using IgxTreeComponent instead.

As mentioned in our Tree Component topic here, the Angular Tree Component allows users to represent hierarchical data in a tree-view structure, maintaining parent-child relationships, and provides functionalities like load on demand, item activation, bi-state and cascading selection of items, etc.

Additionally, in order to achieve the described behavior, in the attached sample I am using a button with igxToggleAction and igxDropDownItemNavigation directives set, which hold a reference to an IgxDropDownComponent, where the IgxTreeComponent is wrapped. The IgxTreeComponent consists of IgxTreeNodeComponents and in order to display each level of hierarchy, a separate IgxTreeNodeComponent should be declared within the tree.

However, having in mind that the hierarchical data source could have numerous levels of depth and this would impact the size of the template file, another approach I could suggest is using IgxTreeGrid and wrapping it in the IgxDropDownComponent instead. I have included this approach in the attached sample as well.

It provides a similar behavior with the difference that the default header is displayed on top of the grid. In case you require to omit it, what I could suggest is overriding the default styles in the scss file.

Please keep in mind that in order custom styling to be applied successfully, a custom overlay outlet container should be declared and the button should include igxToggleOutlet directive with a reference to the container.

This is performed due to the dropdown not being a descendant of the component host – it is currently displayed in the default overlay outlet at the end of the document's body and as mentioned in our Styling Overlay Components topic, when scoping styles for elements that are displayed in the overlay, it is needed to specify the position of the overlay “outlet” in the DOM.

Here could be found my sample for your reference. Please test it on your side and let me know if you need any further assistance.

Additionally, if this is not an accurate demonstration of what you are trying to achieve, please feel free to modify it and send it back to me along with steps to reproduce.

Looking forward to hearing from you.

Sincerely,
Riva Ivanova
Entry Level Software Developer

Hi  Riva Ivanova,

I am looking for Hierarchical items in combo/select, attached the sample screenshot for your reference.

Please suggest me with sample example. Thanks in advance!!