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!!

Furthermore, in order to have a search text box that finds specific elements, what I could suggest is using IgxTreeComponent’s findNodes method, which returns an array of nodes, that match the specified data. More information could be found in the Finding Nodes sections of our Tree topic here.

However, if you require the data list to be filtered when typing a certain value into the input field, I could suggest using an IgxTreeGridComponent and its filter method instead. A sample that demonstrates this functionality could be found in our Angular Tree Grid Filtering Example here.

Here could be found a sample that demonstrates how an IgxInputGroupComponent and an IgxTreeComponent could be wrapped in a div with an IgxToggleDirective, as well as an example with an IgxTreeGridComponent.

However, please note that providing similar functionality as the IgxComboComponent/IgxSelectComponent is beyond the scope of Infragistics Support and this should be handled entirely on application level by the developer! By following these suggestions and using similar approaches, you could achieve your requirement and cover other specific scenarios as well.

Please let me know if you need any further assistance.

Sincerely,
Riva Ivanova
Entry Level Software Developer