Hello Brenda,

I have been looking into your question and after investigating this matter further and doing some research, igx-combo with multi column in it has been determined to be a feature request. You could see this logged feature request. Also I found another feature request that maybe comes close to your expectations for hierarchical data in the igx-combo, which you could find here. You could subscribe for these logged feature requests, and this will give you the opportunity to directly communicate with our development team regarding the issue and get notifications whenever new information is available.

However, in order to achieve the described behavior, what I could suggest is a workaround that behaves and looks like default combo box with a dropdown that contains a tree grid. An igx-input-group component of type box will be used for this purpose. Also, an input element with an igxInput directive, a igx-suffix with an igx-icon to clear the combo, and another suffix with an icon to expand and collapse the combo box will be added to the igx-input-group component too.

<igx-input-group type="box" [igxToggleAction]="toggleRef" (click)="toggleCollapsed()">
    <input igxInput name="City" type="text" [ngModel]="selected" readonly placeholder="Location(s)"/>
    <igx-suffix *ngIf="selected"><igx-icon (click)="clearCombo()">close</igx-icon></igx-suffix>
    <igx-suffix><igx-icon>{{ collapsed ? 'expand_more' : 'expand_less' }}</igx-icon></igx-suffix>
  </igx-input-group>

After that, we'll use a div element with the igxToggle directive and a #toggleRef reference that will contain the igx-tree-grid component and the search field inside it. This div element will be toggled from the input group on click by passing the reference to the div element to the igxToggleAction property.

<div igxToggle #toggleRef="toggle" class="dropdown">
<igx-tree-grid
    #treeGrid
    [data]="data"
    primaryKey="ID"
    foreignKey="ParentID"
    [autoGenerate]="false"
    height="550px"
    width="100%"
    [rowSelection]="'multiple'"
    (rowSelectionChanging)="handleRowSelection($event)"
  ></igx-tree-grid>
</div>

The tree grid component, which will contain the given data and will have a multiple roll selection, with the rowSelection property set to "multiple". The rowSelectionChanging event will be handled and when a row is selected the row id will be added to an array with which additional logic can be performed to the application and furthermore when a row is selected given field by your custom logic can be added to a string variable that will display the selected items from the tree grid in the input field of the combo box input group.

Additionally, an igx-input-group component will be added to the div element containing the grid, which allows to search through entire grid for a given text by given field.

<igx-input-group class="search">
      <input igxInput type="text" placeholder="Search.." (input)="filter($event.target.value)"/>
 </igx-input-group>

The described scenario could be observed here:

In addition, I have prepared small sample illustrating this behavior which could be found here. Please test it on your side and let me know how it behaves.

If you require any further assistance on the matter, please let me know.

Regards,

Georgi Anastasov

Entry Level Software Developer

Infragistics

Using this a a guide:

https://stackblitz.com/edit/angular-xf26na-7ggero?file=src%2Fapp%2Fsample%2Figx-sample%2Figx-sample.component.html

This uses a button to show the igx-tree with checkboxes. Perhaps there is a way to create a list below the button that can show the selected nodes?

I'm not sure how to get the selected nodes either.

I'm using:

  public onNodeSelection(args: ITreeNodeSelectionEvent) {