Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
85
How to consume a webapi service with IgGrid and Angular2
posted

I'm experiencing problems with populating data in my IgGrid when I want to consume a WebApi service.

I have the following in my Angular2 component

getAllClientGroups() {

this.clientService.getClientGroup(0)
.subscribe(groups => {
this.clientGroups1 = groups;

},
err => {
console.log(err);
});
}

and I put this.clientGroups1 in my datasource for the IgGrid:

this.gridOptions = {
autoCommit: true,
width: "100%",
height: "400px",
autoGenerateColumns: false,
dataSource : this.clientGroups1,
columns: [
{ key: "id", headerText: "Id", width: "50px", dataType: "number" },
{ key: "code", headerText: "Code", width: "250px", dataType: "string" },
{ key: "description", headerText: "Omschrijving", width: "250px", dataType: "string" }
],
primaryKey: "id"
]
}

But nothing is showing in my IgGrid. What do I have to do to get this working?

Parents
No Data
Reply
  • 85
    Verified Answer
    posted

    Ok I solved the problem my self. The thing I had to do was to call my datasource in my call. So like this:

    getAllClientGroups() {
    this.clientService.getClientGroup(0)
    .subscribe(groups => {
    this.gridOptions.dataSource = groups;
    },
    err => {
    console.log(err);
    });
    }

    and then in my gridoptions set the datasource to an empty array like this:

    dataSource: []

    I'm happy that I have finally found the solution. Please document this somewhere in the angular2 documentation.

Children