javascript - PrimeNg Table dynamic cell edit control - Stack Overflow|江阴雨辰互联

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:

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>

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:

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

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>

Share Improve this question asked Jan 18, 2019 at 6:53 Saurabh Palatkar 3,38412 gold badges53 silver badges112 bronze badges

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

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745149054a4613781.html

javascript - PrimeNg Table dynamic cell edit control - Stack Overflow

1 Answer 1

发表回复

评论列表（0条）

联系我们

400-800-8888

javascript - PrimeNg Table dynamic cell edit control - Stack Overflow

1 Answer 1

相关推荐