Hi,

I tried the following code but it doesnt display me the table. I have put in my code for all the code used.

app.component.ts****************************************************************************

import {Component} from 'angular2/core';
import {HTTPTestComponent} from "./http-test.component";
import {ROUTER_DIRECTIVES} from 'angular2/router';

@Component({
selector: 'my-app',
template: `
<h1>Angular 2 Boilerplate</h1>
<p>Hello World!</p>
<http-test></http-test>
`,
directives: [HTTPTestComponent,ROUTER_DIRECTIVES]
})
export class AppComponent {

}

*******************************************************************************************

http-test.component.ts**********************************************************************

import {Component} from 'angular2/core';
import {HTTPTestService} from "./http-test.service";
import {IgGridComponent} from "../src/igniteui.angular2.ts";
import {HTTP_PROVIDERS} from "angular2/http";

@Component({
selector: 'http-test',
template: '<ig-grid[(options)] = "gridOptions" [(widgetId)]="id"></ig-grid>\
',
directives: [IgGridComponent],
providers: [HTTP_PROVIDERS, HTTPTestService]
})

export class HTTPTestComponent {
private gridOptions: IgGrid;
private id: string;
private getLogProcessData: string;
constructor(private httpService: HTTPTestService) {
this.httpService.getLogProcessData()
.subscribe(data => this.gridOptions.dataSource = data),
error => alert(error),
() => console.log("Finished");
this.id = 'grid1';
this.gridOptions = {
autoCommit: true,
dataSource: [],
width: "100%",
height: "400px",
autoGenerateColumns: false,
columns: [
{
key: "LOG_PROCESS_OID", headerText: "LOG_PROCESS_OID", width: "50px", dataType: "number"
},
{
key: "PROCESS_NAME", headerText: "PROCESS_NAME", width: "250px", dataType: "string"
},
{
key: "PROCESS_STATUS", headerText: "PROCESS_STATUS", width: "250px", dataType: "string"
}],
primaryKey: "LOG_PROCESS_OID"

};
}
}

**********************************************************************************

Http-test.service.ts********************************************************************

import {Injectable} from "angular2/core";
import {Http} from "angular2/http";
import 'rxjs/add/operator/map';

@Injectable()
export /**
* HTTPTestService
*/
class HTTPTestService {
constructor(private _http: Http) {}
getLogProcessData(){
let Loginfo$ = this._http.get('http://localhost:80//BI40-WEB-SVC/BI40-WEB-SVC/api/LOG_PROCESS')
.map(res => res.json());
return Loginfo$;
}
}

**************************************************************************************

boot.ts********************************************************************************

///<reference path="../node_modules/angular2/typings/browser.d.ts"/>
import {bootstrap} from 'angular2/platform/browser';
import {AppComponent} from "./app.component";
import {ROUTER_PROVIDERS} from "angular2/router";
import {HTTP_PROVIDERS} from "angular2/http";
import {HTTPTestService} from "./http-test.service";

bootstrap(AppComponent, [HTTP_PROVIDERS, HTTPTestService]);

*****************************************************************************************

Please let me know if i am doing something wrong.

Shashank

I modified the code that you provided and it works. thanks for your assistance.

Shashank

That's great! You're welcome.

Hey Deyan,

I was doing some development on those grid and while testing it i found out that the function $.widget does not work with ie11 and firefox but works with chrome.

Do you have knowledge on to what might be the problem fix for it . I have attached the error with this post on what the error looks like in the developer tool.

SCRIPT438: Object doesn't support property or method 'widget'
File: infragistics.core.js, Line: 291, Column: 14

SCRIPT438: Object doesn't support property or method 'widget'
File: infragistics.lob.js, Line: 24, Column: 14

Shashank

Hello Shashank,

This looks like a reference issue, Check you jquery and jquery-ui references.

Are they included ?

Is jQuery.widget working? (You might have another library which uses the global variable $)

Hi I figured out problem. While i was restructuring my project i moved it to a different folder so wasnt referencing to the right file.

I have another issue with igdatachart now. I am trying to use the same web service to work with the data chart and i get errors.

the code looks like this 

import {Component, Inject, ElementRef, EventEmitter, HostListener, Injectable } from '@angular/core';
import { HTTP_PROVIDERS, Http, Response } from '@angular/http';
import {IgDataChartComponent} from "../src/igniteui.angular2.ts";
import {bootstrap } from '@angular/platform-browser-dynamic';
import 'rxjs/add/operator/map';

@Injectable()
export class MyService{
constructor(private http : Http) {}

getAll(){
let people = this.http
.get("app/products.json").map((res: Response) => res.json());
return people;
}
}

declare var jQuery: any;

@Component({
selector: 'my-app',
template: `<ig-data-chart [(options)]="chartoptions" [(widgetId)]='datachart1'></ig-data-chart>`,
directives: [IgDataChartComponent],
providers: [HTTP_PROVIDERS, MyService]
})
export class AppComponent {
private chartoptions: IgDataChart;
private data: any;

constructor(private myService: MyService) {
this.data = this.myService.getAll().subscribe(
res =>
this.chartoptions.dataSource = res);

this.chartoptions = {
dataSource: this.data,
axes: [{
name: "NameAxis",
type: "categoryX",
title: "Product Name",
label: "ProductName"
// label: "CountryName"
},
{
name: "PopulationAxis",
type: "numericY",
minimumvalue: 0,
title: "In Stock Value"
}],
series: [{
name: "2015 Volume",
type: "column",
isHighlightingEnabled: true,
isTransitionInEnabled: true,
xAxis: "NameAxis",
yAxis: "PopulationAxis",
valueMemberPath: "InStock"
// valueMemberPath: "Pop2015"
}]
};
}
}

Please let me if i am doing something wrong.

Hello,

For better handling your cases and not flooding the thread, it would be great to create a different thread for questions not related to the initial question.

Also the chart does not provide the two way data binding capabilities as the grid so you should use the chart api to assign its data source.

constructor(private myService: MyService) {
this.data = this.myService.getAll().subscribe(
res =>
$('#datachart1').igDataChart("option", "datasource", res);