jQuery UI Widgets Forums Grid angular – trying to bind data from backend api

This topic contains 1 reply, has 2 voices, and was last updated by  Todor 4 years, 11 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author

  • jeanvdr
    Participant

    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


    Todor
    Participant

    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

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.