angular – trying to bind data from backend api

[jeanvdrParticipant]

Hi,
I’m trying (without success ’till now) to bind a grid to a backend api.
Here’s my code:

html
<button (click)=”updateView()”>refresh</button>
<jqxGrid [theme]=”‘material-purple'”
[width]=”850″ [source]=”dataAdapter” [columns]=”columns”
[pageable]=”true” [sortable]=”true” [editable]=”false”
[autoheight]=”true” [altrows]=”true” [enabletooltips]=”true”
#myGrid
>
</jqxGrid>

app.component.ts

dataSource: ListePatients[]; // class ListePatients { noidpat: number; nompatiente: string; pren…}

public source: jqwidgets.GridSource = {
datatype: ‘json’, // I’ve tried array, observablearray, async:true
localdata: this.dataSource,
datafields: [
{ name: ‘noidpat’, type: ‘int’},
{ name: ‘nompatiente’, type: ‘string’ },
{ name: ‘prenompatiente’, type: ‘string’ },
{ name: ‘datenaissancepatiente’, type: ‘string’ },
{ name: ‘nomconjoint’, type: ‘string’ },
{ name: ‘prenomconjoint’, type: ‘string’ },
],
record: ‘ListePatients’,
id: ‘noidpat’
};

public dataAdapter = new jqx.dataAdapter(this.source);

public columns: jqwidgets.GridColumn[] = [
{ text: ‘Nom’, datafield: ‘nompatiente’, width: 250 },
{ text: ‘Prénom’, datafield: ‘prenompatiente’, width: 200 },
{ text: ‘DN’, datafield: ‘datenaissancepatiente’}
];

ngOnInit() {
this.apiListePatients(); // calling api in ngOnInit
}

apiListePatients() {
this.apipmaService.getListePatients(this.searchCriteria)
.subscribe(
data => {
//console.log(data);
this.dataSource = data;
console.log(this.dataSource);
}
);
}

Here’s what I receive from my API in the console:
(3) [ListePatients, ListePatients, ListePatients]
0: ListePatients {noidpat: 21052, nompatiente: “xxx”, prenompatiente: “yyy”, datenaissancepatiente: “06/04/1982”, nomconjoint: “zzz”, …}
1: ListePatients {noidpat: 20649, nompatiente: “xxx”, prenompatiente: “yyy”, datenaissancepatiente: “30/05/1979”, nomconjoint: “”, …}
2: ListePatients {noidpat: 20709, nompatiente: “xxx”, pre…

I’ve got nothing in my grid even if I put a button with:
this.myGrid.updatebounddata();

Any help please

Thanks

[TodorParticipant]

Hello jeanvdr,

You could review the following example. It shows how to generate data on button click.

Let us know if you need further assistance.

Best Regards,
Todor

jQWidgets Team
https://www.jqwidgets.com

[Author]

Posts