DataTable does not refresh if the underlying data is changed

UI Components for Angular
meerkatinfrance
Posts: 5
Joined: 13 Feb 2017, 23:33

22 Feb 2017, 15:28

The code I was using before DataTable worked fine.
Whenever Records was changed in the Component, the table updated immediately.

<tr *ngFor="let record of Records >
<td>{{record.nurseryCode }}</td>
<td>{{record.nurseryName}}</td>
<td>{{record.status}} </td>
</tr>

Is there any way I can get Data table to do the same please ?

alexey93
Posts: 65
Joined: 24 Jan 2017, 14:09

22 Feb 2017, 16:41

meerkatinfrance wrote:The code I was using before DataTable worked fine.
Whenever Records was changed in the Component, the table updated immediately.

<tr *ngFor="let record of Records >
<td>{{record.nurseryCode }}</td>
<td>{{record.nurseryName}}</td>
<td>{{record.status}} </td>
</tr>

Is there any way I can get Data table to do the same please ?
I think nobody understands what exactly you want. Your code doesnt explain anything, and you dont have any code that doesnt work for you in a dataTable, how are people supposed to help you?

I think, you might want sthg like this?

Code: Select all

<p-dataTable #dt [value]="Records" [(selection)]="selectedRecord" [editable]="true"  [paginator]="false" [rows]="10" [responsive]="true" >

<p-column field="profile" header="NurseryCody" [sortable]="false" [editable]="true"> </p-column>
<p-column field="hours" header="NurseryName" [sortable]="false" [editable]="true"> </p-column>

<p-column field="limit" header="Status" [editable]="true" [style]="{'overflow':'visible'}">
<template pTemplate="editor" let-col let-profile="rowData">
                            <p-dropdown [options]="YourOptions" [autoWidth]="false" [(ngModel)]="record.status" [style]="{'width':'100%'}" </p-dropdown>
                        </template>
 </p-column>

</p-dataTable>

cagatay.civici
Prime
Posts: 18616
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

22 Feb 2017, 16:53

DataTable is aware of change detection, if you share some details like your code it may give a clue.

meerkatinfrance
Posts: 5
Joined: 13 Feb 2017, 23:33

22 Feb 2017, 17:18

I am so sorry, you are correct. Your Datatable IS aware of change detection.
I made a mistake and I gladly accept all the criticism of my post.
I will be more careful in future and I thank you for your attention.

Memuva
Posts: 2
Joined: 23 Feb 2017, 09:38

23 Feb 2017, 10:20

meerkatinfrance wrote:I am so sorry, you are correct. Your Datatable IS aware of change detection.
I made a mistake and I gladly accept all the criticism of my post.
I will be more careful in future and I thank you for your attention.
I have a similar issue, how did you solve it? Which primeng version are you using (I am using 2.0.0)?

bpbhat77
Posts: 4
Joined: 11 Jan 2017, 08:18

10 May 2017, 12:17

I am having same issue . It was working till 2.0.6 , I upgraded to 4.0.0 and my angular version is 4.0.3/4.1.1 both dynamic changes not working .

denzelj
Posts: 4
Joined: 05 Feb 2015, 13:54

10 May 2017, 14:59

We are having the same problem in our application. We use the datatable component in two places. In both places the datatable does not react on changes in the model.
The example below (simplified) should display a table of log entries.
After the component is initialized in ngInit the data is loaded and the datatable should update.
No errors are reported in the console.

Code: Select all

<p-dataTable [value]="logs" emptyMessage="{{ 'list.noItemsFound' | translate }}">
        <p-column header="Time" [style]="{'width':'120px'}">
            <ng-template let-row="rowData" pTemplate="body">
                {{row.timestamp | date:'dd.MM.y HH:mm'}}
            </ng-template>
        </p-column>
        <p-column header="Log" [style]="{'width':'440px'}">
            <ng-template let-row="rowData" pTemplate="body">
                {{row.message}}
            </ng-template>
        </p-column>
</p-dataTable>

Code: Select all

    ngOnInit(): void {
        this.refreshUI();
    }

    private refreshUI() {
        this.service.getData('xxx').subscribe(
            data => {
                for (let row of data) {
                    this.logs.push({
                        id: row.id,
                        timestamp: new Date(row.logTime),
                        message: row.logMessage
                    });
                }
            }
        );
    }

User avatar
Ctrl-C
Posts: 97
Joined: 29 Sep 2016, 04:21

10 May 2017, 17:30

Datatable change detection was rewritten for 4.0.0 and it doesn't refresh anymore if you change your array content.
You have to reassign the array every time you change it.
Quite a breaking change, yes. I myself have to use beta because I just don't have a time to go throw all of my datatables and change the way they work.

User avatar
sudheer
PrimeFaces Core Developer
Posts: 4345
Joined: 16 Oct 2011, 19:19
Location: Singapore

15 May 2017, 14:58

Please look at this blog for more details https://www.primefaces.org/primeng-4-0-0-rc4-released/
Author,Speaker
https://twitter.com/sudheerjonna
Github: https://github.com/sudheerj
Website http://sudheerjonna.com/

___________________
Sudheer Jonna

curtking
Posts: 3
Joined: 14 May 2017, 13:22

20 May 2017, 20:15

Hey, sudheer -

Can you post a code example of how this needs to work now? I've tried any number of ways of reassigning the array to the datatable and none seem to work.

Any help you can provide would be awesome.

Thanks,
Curt

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 91 guests