Data Table Expandable Rows break when there is a custom column in between the Row Template

[ammar91]

I am trying to implement similar to this one (http://www.primefaces.org/primeng/#/datatablerowexpansion) but one of my column require to use Angular builtin Currency Pipe.

I tried to apply Currency Pipe like below, it throws an error
<p-column field="amount | currency: 'USD': true : '1.2-2'" header="Amount">

So I customized my cell by providing a template like below

<p-column header="Amount"> <template #currentInvoice="rowData"> {{currentInvoice.amount | currency: 'USD': true : '1.2-2'}} </template> </p-column>

However, there is still a problem if I make the column editable. As soon as I click the column to edit, the value wipe's out and when I click outside, it returns back. The value should be there when it get focus. Any thoughts?

And here is the main problem, The row template that I defined right after my all columns, not seems to be working when there is a custom column in between like the above one. So If I have html like below

<p-dataTable [value]="invoices" [responsive]="true" expandableRows="true" [editable]="true"> <p-column header="Amount" [editable]="true"> <template #currentInvoice="rowData"> {{currentInvoice.amount | currency: 'USD': true : '1.2-2'}} </template> </p-column> <template #invoice> <h1>Detail Content</h2> </template>

It throws an error

EXCEPTION: TypeError: Cannot read property 'amount' of null in [ {{currentInvoice.amount | currency: 'USD': true : '1.2-2'}}

Please suggest

[infinity1207]

I have the same problem.

[cagataycivici]

A real solution is being worked on however quick solution is to move the expansion template before the columns.

http://forum.primefaces.org/viewtopic.php?f=35&t=45226

[ammar91]

Thanks, that works.

[cagataycivici]

A safer check is added, so that it works regardless of the location.