Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
30
IGX grid drop-down with key value pair
posted

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

Here is my header code :

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

  • 0
    Offline posted

    Hello Ideaz,

    After investigating this further, I determined that your request could be achieved in three ways. I have made three samples, demonstrating the possible approaches:

    • The following sample could be used if you don’t need the key and only the value of your data.
    • If every key is unique, you can use map to find the value of the required item. This is demonstrated in this sample.
    • If the previous samples aren’t suitable for your requirement, the following one could be used.

    Please let me know whether these suggestions help you achieve your requirement or if you need more information.

    Regards,

    Monika Kirkova,

    Infragistics