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

I am glad that you find my suggestion helpful. After investigating this matter further, what I could say is that our Tree Grid topic along with its subtopics provide detailed information and many samples which demonstrate how different scenarios could be covered. In the next few lines, I have mentioned the topics which I believe would be quite helpful for achieving your requirements.

First, regarding the row selection, as it could be observed in our Angular Row Selection Example here, the IgxTreeGridComponent provides several options for customization including changing the selection behavior to single, multiple, cascade, or none, as well as the opportunity to show or hide the row selector checkbox.

Furthermore, in the sample from my previous response, I am setting igxToggleAction, igxToggleOutlet, and igxDropDownItemNavigation directives on a button and when clicking it the IgxDropDownComponent is being toggled. The same could be achieved with an IgxInputGroupComponent by setting the directives on it and customizing it in a way that replicates the IgxComboComponent. More information regarding IgxInputGroupComponent along with provided samples, which you might consider helpful, could be found in our Input Group topic here.

Moreover, the IgxDropDownComponent allows wrapping any components in it, as demonstrated in the sample where I have wrapped the IgxTreeGridComponent. Having this in mind, in order to have a search text box that filters the data, what I could suggest is wrapping an IgxInputGroupComponent with an input in the dropdown and using IgxTreeGridComponent’s filter method to filter the data. A sample that demonstrates this functionality could be found in our Angular Tree Grid Filtering Example here.

Additionally, in the sample from my previous response, I have included IgxTreeGrid’s rowSelectionChanging method as an example demonstrating that when a given item is selected this event is emitted and could be used for implementing custom logic like closing the dropdown and displaying the selected item.

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

Additionally, please keep in mind that according to our support policy we handle a single issue per case and in case you require further assistance regarding any of the additional issues, my suggestion is to create separate threads with your new question. This is for better consistency and history tracking.

Thank you for using Infragistics components.

Let me know if you need any further assistance.

Sincerely,
Riva Ivanova
Entry Level Software Developer