IGX grid drop-down with key value pair

Question

I am loading grid columns dynamically which is around 100 columns and each column have type either its text or drop-down, In case of drop-down I have a data in form of key value pair like, when I implement the grid the bonded value key display in drop-down column label DATA : { "key": 123, "value": "New York Office"}], please tell me how to display the value as a label

<igx-grid #myGrid
  rowSelection="single" 
  [data]="gridSource.data" 
  [autoGenerate]="false" 
  displayDensity="comfortable" 
  width="100%"
  (onRowSelectionChange)="handleRowSelection($event)"
  height="730px" [paging]="true" [perPage]="20" [allowFiltering]="true">

    <ng-container *ngFor="let header of gridSource.headersMeta;">


      <div *ngIf="header.headerType==='readonly';">
        <igx-column [field]="header.headerKey" [header]="header.headerValue" [dataType]="'string'" [sortable]="true"
          [editable]="false" [resizable]="true">
        </igx-column>
      </div>

      <div *ngIf="header.headerType==='textbox';">
        <igx-column [field]="header.headerKey" [header]="header.headerValue" [dataType]="'string'" [sortable]="true"
          [editable]="true" [resizable]="true">
        </igx-column>
      </div>

      <div *ngIf="header.headerType==='dropdown';">
        <igx-column [field]="header.headerKey" [header]="header.headerValue" width="12%" [editable]="true" [filterable]="true" [sortable]="true">
          <ng-template igxCell let-cell="cell">
            {{ cell.value }}
          </ng-template>
          <ng-template igxCellEditor let-cell="cell" let-value>
            <igx-select [(ngModel)]="cell.editValue" [igxFocus]="cell.focused">
              <igx-select-item *ngFor="let option of header.headerData" [value]="option.key">{{ option.value }}
              </igx-select-item>
            </igx-select>
          </ng-template>
        </igx-column>
      </div>

    </ng-container>

</igx-grid>

score 1 · Answer 1 · edited May 15 '20 at 11:15

1

As I see you are using igx-select. Your html definition looks fine, can you try to reproduce the issue by updating this sample.

<igx-select-item *ngFor="let item of items" [value]="item.key" [text]="item.value">
  {{item.value}}
</igx-select-item>

public items = [{ key: 1, value: "Orange" }, { key: 1, value: "Mango" },...];

edited May 15 '20 at 11:15

Konstantin Dinev

34,219
14
75
100

answered Jan 20 '20 at 15:01

Zdravko Kolev

1,569
14
20

score 0 · Answer 2 · answered Aug 28 '20 at 15:43

May be you resolved your issue now, but this will help to any newbie.

<igx-column [field]="header.headerKey" -- here instead of key, the field should be the value. So in the grid collection we may need both id and value as two properties for a dropdown field.

IGX grid drop-down with key value pair

2 Answers2