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

Parents

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
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
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
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 Deyan Kamburov

Hi Deyan,

i just figured out way to do it. As I said in last query, I am using promise to wait for data and reapply all grid config including data. is there a way to make use of subscribe & Observable in Angular 2 to achieve the same.

Can you give me any clarity regarding when the official support for Angular 2 will be announced.

Thank you once again.

Regards

Rahul S
Cancel
Reply

Cancel
190

Rahul posted over 7 years ago in reply to Rahul

Hi Deyan,

As communicated before, I am now creating the grid configuration when I receive the data from API. What I do is, I will have two objects in JSON string from API. One will have the Column configuration (headerText, Key. Width) & the other will have column data. I am successful in binding the data and everthing works fine. I have enabled updating and paging as features. But when I try to edit the columns I am getting an error in console saying as follows:-

ERROR TypeError: Cannot read property 'key' of null
    at t.(anonymous function).(anonymous function).getColumnByTD (http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js:148:3530)
    at t.(anonymous function).(anonymous function).getColumnByTD (http://code.jquery.com/ui/1.10.3/jquery-ui.min.js:5:5028)
    at t.(anonymous function).(anonymous function)._getColumnKeyForCell (http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js:503:31547)
    at t.(anonymous function).(anonymous function)._getColumnKeyForCell (http://code.jquery.com/ui/1.10.3/jquery-ui.min.js:5:5028)
    at t.(anonymous function).(anonymous function).editorForCell (http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js:502:7827)
    at t.(anonymous function).(anonymous function).editorForCell (http://code.jquery.com/ui/1.10.3/jquery-ui.min.js:5:5028)
    at t.(anonymous function).(anonymous function)._startEditForCell (http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js:502:30310)
    at t.(anonymous function).(anonymous function)._startEditForCell (http://code.jquery.com/ui/1.10.3/jquery-ui.min.js:5:5028)
    at t.(anonymous function).(anonymous function)._startEditForRow (http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js:502:29215)
    at t.(anonymous function).(anonymous function)._startEditForRow (http://code.jquery.com/ui/1.10.3/jquery-ui.min.js:5:5028)

I am able to bind the column with key element, autoGenerateColumn flag is false. Can you tell me what am I doing wrong.

Regards

Rahul S
Cancel
Reply

Cancel

Reply

3995

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

Hello Rahul,

Make sure you have primaryKey defined - it is required from the Updating. Also its value should be unique for the record.
Cancel
Reply

Cancel

Children

3995

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

Hi Rahul,

In my opinion this is the reason.

The values of the primary keys are going into data-id attribute, which is an html attribute and probably those special characters and white spaces are messing it up.
Cancel
Reply

Reject Answer

Cancel
190

Rahul posted over 7 years ago in reply to Deyan Kamburov

Hi Deyan,

I had already defined primaryKey. On debugging I came to know that it the special characters & white space present in Key attribute of columns which creates the problem. I removed all the white spaces & special characters and now everything works as excepted. Is this a known behavior of the grid?

Regards

Rahul S
Cancel
Reply

Cancel