primeNG Datatable does not update when datasource changes

Question

I have an issue with primeNG datatable, when updating the datasouce the datatable does not automatically update. I have two datatables in different components that are communicating via a service, when clicking on one row in the first datatable a method is called which updates the datasource, however the second datatable does not recognize it. Maybe someone had a similar issue or has an example of how to solve issues like that with primeNG datatable? I would appreciate any help.

Hi @Memuva welcome to Stack Overflow. It would help us help you if you could reproduce this on https://jsfiddle.net/ or similar sites so that we could check the code in an isolated context — Aivan Monceller, Feb 23 '17 at 09:22
I added a similar project here (without node modules ) https://expirebox.com/download/fd34cfeb74a86aeb4ed9cfc96f7bf7cd.html when calling the method getScriptsByMaterialnumber() in the Service the right Scripts are stored in the materialnumberScripts variable however the script.component does not recognize that the datasource -> materialnumberScripts changes — Memuva, Feb 23 '17 at 11:41
I made it work with the OnChangeEvent and a direct ParentChildRelationship between the materialnumber.component and the script.component https://expirebox.com/download/35286dc04662e4be570b6652b398482f.html , but that's not what I want, I would like to have that functionality in the Service. Does someone have a clue of how this could work? — Memuva, Feb 23 '17 at 12:33
Did you find a solution? I'm facing similar issues when changing the datasource but the table doesn't changed. I posted my question at http://stackoverflow.com/questions/42587424/primeng-datatable-doesnt-refresh — Paul Meems, Mar 03 '17 at 20:03
There was another bug filed about this here: https://github.com/primefaces/primeng/issues/2219 — rbj325, Jun 12 '17 at 18:59

Anne · Accepted Answer · 2017-06-23T09:46:12.027

5

in my case:push data into tableData array, then copy tableData array itself (use slice())

export class DataTableComponent{
    tableData=[];
    county={id:1,name:"china"}
    onAdd(){
         this.tableData.push( Object.assign({}, this.country));
         this.tableData=this.tableData.slice();
    }
}

and it works

edited Jun 23 '17 at 09:46

answered Jun 23 '17 at 09:38

Anne

672
5
6

score 1 · Answer 2 · answered May 31 '17 at 10:46

1

I found a solution for this here: datatable issue on github

I tested this and works:

this.myDatasource = new Array;
this.myDatasource = myNewValuesFromService;

answered May 31 '17 at 10:46

Laura Abad Avilés

776
1
7
16

score 0 · Answer 3 · edited Jun 27 '17 at 14:33

0

I have used the approach of Anne, and it worked perfectly for me. The problem I had was that in service callback I was using array[index] = new_value, and dataTable would not be aware of the change.

By adding slice() it worked perfectly.

edited Jun 27 '17 at 14:33

msanford

11,803
11
66
93

answered Jun 27 '17 at 08:44

H.G.

415
2
4
17

primeNG Datatable does not update when datasource changes

3 Answers3