javascript - PrimeNg Table dynamic cell edit control - Stack Overflow

admin管理员组

文章数量:1415100

I've following PrimeNG Table

Here is the StackBlitz demo.

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:

1. Text box if "Property Value Type" cell value for that row is String
2. 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>

I've following PrimeNG Table

Here is the StackBlitz demo.

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:

1. Text box if "Property Value Type" cell value for that row is String
2. 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>

• javascript
• angular
• primeng
• primeng-datatable

Share Improve this question Follow asked Jan 18, 2019 at 6:53 Saurabh PalatkarSaurabh Palatkar 3,3841212 gold badges5353 silver badges112112 bronze badges 0

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

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

本文标签： javascriptPrimeNg Table dynamic cell edit controlStack Overflow