PrimeNg Table dynamic cell edit control

Question

All three columns are editable. "Property Name" column always renders Text box in edit whereas "Property Value Type" column always renders a dropdown.

But for Property Value column I want to either render Text box or Dropdown depending on following two conditions:

Text box if "Property Value Type" cell value for that row is String
Dropdown if "Property Value Type" cell value for that row is Boolean

I've added conditional edit controls in the grid HTML. When I change the value for "Property Value Type" cell from String to Boolean (or other way around), then "Property Value" cell for that row should render Dropdown but it still shows a Text box (unless I trigger pagination event or sort event).

How do I refresh the specific cell?

Component:

export class AppComponent {
  name = 'Angular';
  tableColumns = [
    { field: 'propName', header: 'Property Name' },
    { field: 'propValue', header: 'Property Value' },
    { field: 'propValueType', header: 'Property Value Type' },
  ];
  booleanOptions = [{ label: 'true', value: 'true' }, { label: 'false', value: 'false' }];
  propValueTypeOptions = [{ label: 'String', value: 'String' }, { label: 'Boolean', value: 'Boolean' }];
  tableItems = [
    { propName: 'prop 1', propValue: 'value 1', propValueType: 'String' },
    { propName: 'prop 2', propValue: 'true', propValueType: 'Boolean' },
    { propName: 'prop 3', propValue: 'value 3', propValueType: 'String' },
    { propName: 'prop 4', propValue: 'true', propValueType: 'Boolean' },
    { propName: 'prop 5', propValue: 'value 5', propValueType: 'String' },
    { propName: 'prop 6', propValue: 'true', propValueType: 'Boolean' },
    { propName: 'prop 7', propValue: 'value 7', propValueType: 'String' },
    { propName: 'prop 8', propValue: 'true', propValueType: 'Boolean' },
    { propName: 'prop 9', propValue: 'value 9', propValueType: 'String' },
    { propName: 'prop 10', propValue: 'true', propValueType: 'Boolean' },
  ];


  refreshGrid() {
    const temp = [...this.tableItems];
    this.tableItems = temp;
    setTimeout(() => {
      this.tableItems = [...temp];
    }, 0);
  }

  showPropNameEditCellTextBox(col) {
    return (col.field === 'propName');
  }

  showPropValueTypeEditDdl(col) {
    return (col.field === 'propValueType');
  }

  showPropValueTxtIfString(rowData, col) {
    return (col.field === 'propValue' && rowData.propValueType === 'String');
  }

  showPropValueDdlIfBoolean(rowData, col) {
    return (col.field === 'propValue' && rowData.propValueType === 'Boolean');
  }
}

HTML:

<div>
    <p-table [columns]="tableColumns" [value]="tableItems" [paginator]="true" [rows]="15" resizableColumns="true" responsive="true"
     [rowHover]="true" derableColumns="true">
        <ng-template pTemplate="header" let-columns>
            <tr>
                <th *ngFor="let col of columns" [pSortableColumn]="col.field">
                    {{col.header}}
                    <p-sortIcon [field]="col.field"></p-sortIcon>
                </th>
            </tr>
        </ng-template>
        <ng-template pTemplate="body" let-rowData let-columns="columns">
            <tr>
                <td pEditableColumn *ngFor="let col of columns">
                    <p-cellEditor>
                        <ng-template pTemplate="output">
                            {{rowData[col.field]}}
                        </ng-template>

            <!-- Show text box for "Property Name" column -->
                        <ng-template pTemplate="input" *ngIf="showPropNameEditCellTextBox(col)">
                            <input pInputText [(ngModel)]="rowData[col.field]" type="text" maxlength="50" class="form-control" />
            </ng-template>
            <!-- Show text box for "Property Name" column /-->

            <!-- Show Text for "Property Value" column if Property Value Type column is "String" -->
            <ng-template pTemplate="input" *ngIf="showPropValueTxtIfString(rowData, col)">
              <input pInputText [(ngModel)]="rowData[col.field]" type="text" maxlength="50" class="form-control" />
            </ng-template>
            <!-- Show Text for "Property Value" column if Property Value Type column is "String" /-->

            <!-- Show Dropdown for "Property Value" column if Property Value Type column is "Boolean" -->
            <ng-template pTemplate="input" *ngIf="showPropValueDdlIfBoolean(rowData, col)">
              <select class="form-control" [(ngModel)]="rowData[col.field]">
                <option *ngFor="let item of booleanOptions" class="form-control" [value]="item.value">{{item.label}}</option>
              </select>            
            </ng-template>
            <!-- Show Dropdown for "Property Value" column if Property Value Type column is "Boolean" /-->

            <!-- Show dropdown for "Property Value Type" column -->
            <ng-template pTemplate="input" *ngIf="showPropValueTypeEditDdl(col)">
              <select class="form-control" [(ngModel)]="rowData[col.field]" (change)="refreshGrid()">
                <option *ngFor="let item of propValueTypeOptions" class="form-control" [value]="item.value">{{item.label}}</option>
              </select>
            </ng-template>
            <!-- Show dropdown for "Property Value Type" column /-->
                    </p-cellEditor>
                </td>
            </tr>
        </ng-template>
    </p-table>
</div>

Subodh Ghulaxe Subodh Ghulaxe · Accepted Answer · 2019-01-18T15:18:00

PrimeNG Table detects changes based on the reference of the value changes, so just creating a new object or making deep copy should solve your issue

To make a deep copy use JSON.parse(JSON.stringify(a)) or use cloneDeep from lodash

refreshGrid() {
    let temp = [...this.tableItems];
    temp = JSON.parse(JSON.stringify(temp));
    this.tableItems = temp;
    setTimeout(() => {
      this.tableItems = [...temp];
    }, 0);
}

Updated stackblitz

PrimeNg Table dynamic cell edit control

1 Answers