Hi DeyanK, thanks for your quick response. The grid is able to display the data. Once I click on any of the header, the number of rows reduces down to 1.

Another problem I have is that, if I only use the same array for the gridData without a surrogate key, i.e.

Replace the following:

this.gridData = data;
this.gridOptions.dataSource = data;

with the following:

for (let e of data) {
this.gridData.push(e);
}

I would get double number of records (10 instead of 5).

Thanks,

-Jessica

import { Component } from '@angular/core';
import { IgGridComponent } from "../igniteui-angular2/index";
import { Supplier } from "../Services/Supplier.service";

@Component({
selector: 'home',
templateUrl: 'app/Components/supplier.component.html',
styleUrls: ['app/Components/supplier.component.css']
})
export class SupplierComponent {
gridId: string = "";
gridOptions: IgGrid = {};
gridData: any[] = [];

constructor(private supplier: Supplier) {
this.supplier.getAllSuppliers().then(
data => {
this.gridData = data;
this.gridOptions.dataSource = data;
});
this.populateGrid();
}

populateGrid(): void {
this.gridId = "supplierGrid";
this.gridOptions = {
dataSource: this.gridData,
width: "100%",
height: "400px",
autoGenerateColumns: false,
columns: [
{ key: "supplierName", headerText: "Supplier Name", width: "25%", dataType: "string" },
{ key: "description", headerText: "Description", width: "25%", dataType: "string" },
{ key: "created", headerText: "Created", width: "25%", dataType: "string" },
{ key: "users", headerText: "Users", width: "25%", dataType: "number" }
],
features: [
{
name: "Paging",
pageSizeDropDownLocation: "inpager"
},
{
name: "Sorting"
}
]
}
}

};

import { Injectable } from "@angular/core";
import { SUPPLIERS} from "./supplier-mock-data";

@Injectable()
export class SupplierService {

// GET
getAllSuppliers(): Promise<any[]> {
return Promise.resolve(SUPPLIERS);
}
}

supplier-mock-data.ts

export const SUPPLIER: any[] = [
{
supplierName: "Company A",
description: "Crackers",
created: "08/01/2016",
users: 2
},
{
supplierName: "Company B",
description: "Water",
created: "08/01/2016",
users: 2
},
{
supplierName: "Company C",
description: "Meat",
created: "08/01/2016",
users: 3
},
{
supplierName: "Company D",
description: "Misc",
created: "08/01/2016",
users: 6
},
{
supplierName: "Company E",
description: "Gas",
created: "08/01/2016",
users: 2
}
];

Hello Jessica,

Thank you for the additional information. I managed to reproduce the issue you are facing.

The grid is initially create and then the service returns the data so the data is changeable, please set the dataSource as attribute in the template where initializing the grid. Here's what I've changed to make it working:

export class SupplierComponent{

    gridId: string = "";

    gridOptions: IgGrid = {};

    gridData: any[] = [];

    constructor(private supplier: SupplierService) {

        this.supplier.getAllSuppliers().then(

            data => {

                this.gridData = data;

                //this.gridOptions.dataSource = data;

            });

        this.populateGrid();

    }

    populateGrid(): void {

        this.gridId = "supplierGrid";

        this.gridOptions = {

            //dataSource: this.gridData,

            width: "100%",

            height: "400px",

            autoGenerateColumns: false,

            columns: [{

                key: "supplierName", headerText: "Supplier Name", width: "25%", dataType: "string"

            }, {

                key: "description", headerText: "Description", width: "25%", dataType: "string"

            }, {

                key: "created", headerText: "Created", width: "25%", dataType: "string"

            }, {

                key: "users", headerText: "Users", width: "25%", dataType: "number"

            }],

            features: [{

                name: "Paging",

                pageSizeDropDownLocation: "inpager"

            }, {

                name: "Sorting"

            }]

        }

    }

}

Into your template(supplier.component.html) make sure you bind the dataSource as attribute

<ig-grid [options]="gridOptions" [(widgetId)]='gridId' [(dataSource)]="gridData"></ig-grid>