DataTable cells with templating are not updated

[suryakand]

I'm submitting a ... (check one with "x")

[x] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Plunkr Case (Bug Reports)
Link from documentation/example: http://www.primefaces.org/primeng/#/datatable/templating

Current behavior

If you have DataTable with custom template and there is column with action (for deleting records etc.) and if you are on second page click event in action column does not propagates correct record, rather it send record at same index on first page.

Expected behavior

When clicked on action on second (or higher) page against any row it should propagate/bind correct record.

Minimal reproduction of the problem with instructions

1. Create a DataTable with custom template as provided in this example http://www.primefaces.org/primeng/#/datatable/templating,
2. Goto second page and click on action icon in last column, you'll notice that selected record/row is not binding correctly.

What is the motivation / use case for changing the behavior?

Performing CRUD operation on second and success page is broken because of this bug.

Please tell us about your environment:

-> All

• Angular version: 2.0.X

• PrimeNG version: 2.0.X

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

• Language: [all | TypeScript X.X | ES6/7 | ES5]
  -> TypeScript 2.0

• Node (for AoT issues): node --version =

[chrisi]

i have a similar problem with formatted values in a templated column:
while paginating through a recordset the values in the templated column all stay the same from the first page.

  <p-dataTable [value]="txs" [rows]="10" [paginator]="true" [pageLinks]="3" [rowsPerPageOptions]="[5,10,20]">
    <p-column field="date" header="Date" [style]="{width: '100px'}"></p-column>
    <p-column field="name" header="Name"></p-column>
    <p-column field="amount" header="Amount" [style]="{width: '100px', 'text-align': 'right'}">
      <template let-col let-tx="rowData" pTemplate="body">
        <span>{{tx[col.field] | currency:'EUR':true:'1.2-2'}}</span>
      </template>
    </p-column>
    <p-column field="email" header="Email"></p-column>
    <p-column field="description" header="Description"></p-column>
  </p-dataTable>

Angular 2.3.1 / PrimeNG 1.1.2 / Chrome 55.0.2883.87 m / Typescript 2.0.3

[suryakand]

@chrisi to solve the problem temporarily I used below trick:
<template pTemplate="body" let-record="rowData" let-i="rowIndex" > <button type="button" class="ui-button-danger" pButton (click)="delete(i)" icon="fa fa-trash"></button> <a class="ui-button-info" pButton icon="fa fa-external-link" [routerLink]="['/providers', dataRows[i].id]"></a> </template>

Note ( let-i="rowIndex") and (dataRows[i]) where dataRows is array of results on current page.

I hope this will help you.

[wsaca]

I have a problem with Observables, when I delete the first record works ok, but if I try to delete again the first record, "rowData" return the old value that was previously deleted. I have tested this issue with html and ngFor only, but the problem is with "p-dataTable".

[suryakand]

@lynx12 refresh your datatable after delete and I think this is in general a good practice because there may be multiple people working on same screen. I had same issue and I solved by doing refresh.

If you look at the example that I have provided above I am passing index "i" in my delete function and here is my deleted function:

`
delete(i) {
let ci = this;
var selectedRow = this.dataRows[i];

if(selectedRow && selectedRow.id) {
  this.confirmationService.confirm({
      message: 'Do you want to delete coverage ID [ ${selectedRow.id} ] record?',
      header: 'Delete Confirmation',
      icon: 'fa fa-trash',
      accept: () => {
        this.dataService.deleteById(selectedRow.id).subscribe((res) => {
          ci.refresh();
          ci.resetForm();
          ci.displayDialog = false;        
        });
      }
  });
}

}
`

[sudheerj]

I observed that even rowIndex displaying the first page results.Can you please confirm on this.

[chpasha]

I also experience strange behaviour with DataTable, I have a master-detail and the detail shows wrong content after second change in master, with wrong I mean it shows column values from wrong rows, like if I have an array of key-values, the key1 becomes valueX instead of value1. I have reverted to 1.1.1 and the problem is gone, so it must be some bug in the latest changes to DataTable

[ragafus]

I'm experiencing this same buggy behavior when modifying the array passed to the DataTable. In those columns with body template, neither the data nor the row index are being updated