How to template cell in igxGrid?

Question

I am starting to work with igx-grid and I have templated cells with combobox as below:

<igx-column field="Locations" header="Available At" [editable]="true" [filterable]="false" width="220px">
     <ng-template igxCellEditor let-cell="cell" let-value>
         <igx-combo type="line"
                    [ngModel]="cell.value"
                    (ngModelChange)="onChange($event, cell)"
                    [displayKey]="'shop'"
                    [data]="locations"
                    width="220px"></igx-combo>
     </ng-template>
</igx-column>

However, when the cell is not in edit mode the combobox is not visible. How do I make the combo visible?

score 2 · Answer 1 · edited Dec 09 '20 at 09:35

You added cell editing template. In similar way you may add cell template. In your cell template you may add literally everything. To add drop down arrow you may add igxIcon like this:

<ng-template igxCell let-cell="cell">
    <span>{{ cell.value }}</span>
    <igx-icon>keyboard_arrow_down</igx-icon>
</ng-template>

More about cell templates you may find here. Note you will need to style this in order to force drop down arrow to be placed exactly where the one of the combo is.

How to template cell in igxGrid?

1 Answers1