How to use Ignite UI grid with Angular 2 to load data from Web API?

190

Rahul posted over 7 years ago

Hi,

As per the requirement of my project, I am in need of developing Ignite UI grid with Angular 2 and Web API. I have worked on Ignite UI Jquery grid. But Angular 2 is entirely new to me. I do know that the support for Angular 2 is on the way. I was following the sample sol. from Github('https://github.com/IgniteUI/igniteui-angular2') to create Angular 2 Grid. I was successfully able to do it. But I want the data to be dynamically loaded from Web API. I tried creating some HTTP service class from angular to achieve the dynamic loading of data, but was not successful in doing it. I went through the forum for any relevant solution, but didn't find any. It will be really helpful if you could provide a working example of Ignite UI grid with Angular 2 & Web API ASAP.

Awaiting for your response.

Regards,

Rahul S

3995

Verified Answer
Offline Deyan Kamburov posted over 7 years ago in reply to Rahul

Hello Rahul,

You can reapply the grid configuration when setting the data, apply a whole new set of gridOptions including columns declarations.
Cancel
Reply

Reject Answer

Cancel
190

Rahul posted over 7 years ago in reply to Rahul

Hi Deyan,

I successfully binded the data from Web API to the grid. I used a Promise to bind the data once it is received. Just one more query, say I am dynamically binding the data to the grid and I don't know which will be column names and model/design of grid. So, In this case is it possible to create the design of grid dynamically based on data received. By design what I meant is to configure each column properties like column fixing, read only, filtering, . . . If it is possible can you tell me how can I achieve it.

Hoping to hear from you soon.

Thanks & Regards

Rahul S
Cancel
Reply

Cancel
190

Rahul posted over 7 years ago in reply to Rahul

Hi Deyan,

Just to clarify the scenario. I am actually able to make a HTTP request to API. While the API is being called and data is being fetched the grid is already rendered with no data. So once the response is received the data is not binded to the grid. Can you suggest a solution to this.

Regards,

Rahul S
Cancel
Reply

Cancel
190

Rahul posted over 7 years ago in reply to Deyan Kamburov

Hi Deyan,

Thank you for your quick response.

I went through the sample you provided, still was unable to load the data. I am successful in rendering the grid but not able to populate any data in it. The code below is being used by me. Can you tell me what is that I am doing wrong.

Samples.ts

import { NgIf } from '@angular/common/src/directives/ng_if';

import { directiveDef } from '@angular/core/src/view/provider';

import { Component, Directive, OnInit } from '@angular/core';

import {IEmployee} from './Models/employee';

import {EmployeeService} from './Service/employee.service';

import { IgGridComponent } from '../src/igniteui.angular2';

import { Observable } from 'rxjs/Observable';

declare var jQuery: any;

@Component({

    selector: 'my-app',

    template: `

        <ig-grid [(options)]="gridOptions" [(widgetId)]='id' (cellClick)="cellClickHandler($event)" (rendering)='renderedEventHandler($event)' ></ig-grid>

`,

providers: [EmployeeService]

})

export class AppComponent {

employees: IEmployee[];

    private gridOptions: IgGrid;

    private cellClickHandler: any;

    private renderedEventHandler:any;

private data: Array<any>;

private id: string = "grid1";

    constructor(private _employeeService:EmployeeService) {

this._employeeService.getEmployees()

.subscribe((empData)=>this.gridOptions.dataSource=empData)

            this.cellClickHandler= function(ui){

                console.log("grid cell click");

            };

            this.renderedEventHandler= function(ui){

                console.log("grid is rendered.");

            };

        this.gridOptions = {

dataSource: [],

width: "100%",

primaryKey: "Id",

autoCommit: true,

autoGenerateColumns: false,

columns: [

{ "headerText": "ID", "key": "Id", "dataType": "number", "width": "10%" },

{ "headerText": "Name", "key": "Name", "dataType": "string", "width": "40%" },

{ "headerText": "Age", "key": "Age", "dataType": "string", "width": "25%" },

{ "headerText": "Address", "key": "Address", "dataType": "string", "width": "25%" },

{ "headerText": "Domain", "key": "Domain", "dataType": "string", "width": "25%" },

{ "headerText": "Mobile No", "key": "Mobile_No", "dataType": "string", "width": "25%" },

{ "headerText": "Email ID", "key": "Email_Id", "dataType": "string", "width": "25%" },

{ "headerText": "Status", "key": "Status", "dataType": "string", "width": "25%" },

{ "headerText": "Salary", "key": "Salary", "dataType": "string", "width": "25%" },

{ "headerText": "Grade", "key": "Grade", "dataType": "string", "width": "25%" },

{ "headerText": "Team Name", "key": "Team_Name", "dataType": "string", "width": "25%" },

{ "headerText": "Date of Joining", "key": "Date_of_Joining", "dataType": "string", "width": "25%" }

],

};

    }

}

Employee.service.ts

import { Injectable } from '@angular/core';

import { Http, Response, Headers, RequestOptions} from '@angular/http';

import { Observable } from 'rxjs/Observable';

import 'rxjs/add/operator/map';

import 'rxjs/add/operator/do';

import 'rxjs/add/operator/catch';

import { IEmployee } from '../Models/employee';

@Injectable()

export class EmployeeService {

constructor(private _http: Http) { }

getEmployees(): Observable<IEmployee[]>{

return this._http.get("http://localhost:59088/api/values")

.map((response: Response)=> <IEmployee[]>response.json());

}

}
Cancel
Reply

Cancel
3995

Offline Deyan Kamburov posted over 7 years ago

Hello Rahul,

Please take a look at the following sample which uses angular-in-memory-web-api https://github.com/IgniteUI/igniteui-angular2/blob/master/samples/igGrid-HTTPClient/app.ts

I believe this is a similar scenario.
Cancel
Reply

Cancel