Table group header editing

UI Components for Angular
Post Reply
DrPennybags
Posts: 1
Joined: 26 Oct 2021, 23:10

26 Oct 2021, 23:30

I have a group header in which I want to add editing. I have the editing commands in the template but the editing variable does not implement properly. What am I doing wrong, against the control features, or a bug?

Code: Select all

<p-table [value]="data" dataKey="code" editMode="row" responsiveLayout="scroll" rowGroupMode="subheader" groupRowsBy="child.code">

    <ng-template pTemplate="header">
        <tr>
            <th colspan="2">Code</th>
            <th>Name</th>
            <th>Created</th>
            <th>Modified</th>
            <th style="width:10rem"></th>
        </tr>
    </ng-template>
    
    <ng-template pTemplate="groupheader" let-data let-foo="editing" let-ri="rowIndex">
        <tr pRowGroupHeader [pEditableRow]="indicator.indicatorType">
            <td class="text-bold" colspan="5">
                <p-cellEditor>
                    <ng-template pTemplate="input">
                        <input pInputText type="text" [(ngModel)]="data.child.code">
                    </ng-template>
                    <ng-template pTemplate="output">
                        {{data.child.code}}
                    </ng-template>
                </p-cellEditor>
            </td>
            <td style="text-align:center">
                <button *ngIf="!foo" pButton pRipple pInitEditableRow type="button" icon="far fa-pencil" (click)="onRowEditInit(data.child)" class="p-button-rounded p-button-text"></button>
                <button *ngIf="foo" pButton pRipple pSaveEditableRow type="button" icon="far fa-check" class="p-button-rounded p-button-text p-button-success p-mr-2"></button>
                <button *ngIf="foo" pButton pRipple pCancelEditableRow type="button" icon="far fa-times" (click)="onRowEditCancel(data.child, ri)" class="p-button-rounded p-button-text p-button-warning"></button>
                <button *ngIf="foo" pButton pRipple type="button" icon="far fa-trash" class="p-button-rounded p-button-text p-button-danger"></button>
            </td>
        </tr>
    </ng-template>

    <ng-template pTemplate="body" let-data let-editing="editing" let-ri="rowIndex">
        <tr [pEditableRow]="data">
            <td></td>
            <td>
                <p-cellEditor>
                    <ng-template pTemplate="input">
                        <input pInputText type="text" [(ngModel)]="data.code">
                    </ng-template>
                    <ng-template pTemplate="output">
                        {{data.code}}
                    </ng-template>
                </p-cellEditor>
            </td>
            <td>
                <p-cellEditor>
                    <ng-template pTemplate="input">
                        <input pInputText type="text" [(ngModel)]="data.value">
                    </ng-template>
                    <ng-template pTemplate="output">
                        {{data.value}}
                    </ng-template>
                </p-cellEditor>
            </td>
            <td>{{data.createdDateUtc | amFromUtc | amLocal | amDateFormat:'L LTS'}}</td>
            <td>{{data.modifiedDateUtc | amFromUtc | amLocal | amDateFormat:'L LTS'}}</td>
            <td style="text-align:center">
                <button *ngIf="!editing" pButton pRipple pInitEditableRow type="button" icon="far fa-pencil" (click)="onRowEditInit(data)" class="p-button-rounded p-button-text"></button>
                <button *ngIf="editing" pButton pRipple pSaveEditableRow type="button" icon="far fa-check" class="p-button-rounded p-button-text p-button-success p-mr-2"></button>
                <button *ngIf="editing" pButton pRipple pCancelEditableRow type="button" icon="far fa-times" class="p-button-rounded p-button-text p-button-warning"></button>
                <button *ngIf="editing" pButton pRipple type="button" icon="far fa-trash" class="p-button-rounded p-button-text p-button-danger"></button>
            </td>
        </tr>
    </ng-template>
  </p-table>

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 11 guests