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 with dropdown of 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,

    According to our support policy you can create only one case per problem. I will continue the communication in the other case.

    Regards,
    Monika Kirkova,
    Infragistics