How can I set an Observable returned by angular2 http service as a grid's (or any other control's for that matter) datasource?
I've reviewed the samples on github but there all the data is populated right in the component's constructor.Observables are async and by the time data is returned it's too late to bind it to the grid.
Actually, if I don't set grid's datasource to something righ in the constructor (or ngOnInit) I'm getting "Unexpected token u in JSON at position 0" right on line 335 of igniteui.anular2.js because datasource is 'undefined'.
Line 335 : this._dataSource = JSON.parse(JSON.stringify(this._config.dataSource));Please help.Thank you.
Hello Aleksey,
Thank you for posting in our forum.
Initially you can set an empty data source to the grid and set the actual data retrieved from the service at a later time.
For example:
constructor() {
this.data =[];
this.gridOptions = {
autoCommit:true,
dataSource: this.data
... }
The grid takes a copy of the initially set data so that it can track changes on data operations.
In order to change the data at a later time you can set a new value for the dataSource option in the grid’s options, for example:
this.data =<YourNewData>;
this.gridOptions.dataSource = this.data;
Let me know if this solves your issue.
Best Regards,
Maya Kirova
Infragistics, Inc.
http://www.infragistics.com/support
No, this doesn't work for me. This approach works if I update the dataSource in ngOnInit (I assume because at this time grid's ngOninit hasn't been called yet), but not when I do something like that:
this.myWebServie.getData().subscribe( () => {}, () => {}, () => { this.data = ['new item 1', 'new item 2']; this.gridOptions.dataSource = this.data; }
Bump
@Component({ selector: 'Grid-app', templateUrl: "./GridTemplate.html", directives: [IgGridComponent], providers: [HTTP_PROVIDERS, DataService],})export class GridComponent { private gridOptions: IgGrid; private id: string; items: Observable<IMyMetaData[]>;
ngOnInit() { this.items = this.dataService.getData(); this.gridOptions.dataSource = this.items; // actual data here }
constructor(public dataService: DataService) { this.id = 'grid1'; this.gridOptions = { autoCommit:true, dataSource: this.items, autoGenerateColumns: false, columns: [ { key: "ID", headerText: "ID", width: "100px", dataType: "number" }, { key: "data1", headerText: "data1", width: "250px", dataType: "string" }, { key: "data2", headerText: "data2", width: "250px", dataType: "string" }, { key: "data3", headerText: "data3", width: "200px", dataType: "string", template: jQuery("#colTmpl").html() } ], primaryKey: "ID", features:[] }; }}
I have similar problem. Grid dont get populated with data instead I can see the spinning icon over grid forever. Can you suggest me the way to correctly populate grid with data received by service ?
I’ve attached a small sample for your reference in which the data is retrieved from a remote service on click of a button and set as dataSource of the grid.
To run the sample unzip it, run the “npm install” command in order to download all dependencies and then “npm start” to run it.
Initially you’ll see that the grid is empty since an empty array is set as the dataSource.
On click of the “Get Data” button (which is directly below the grid) the data will be retrieved from the service, populating both the grid and the table below it.
Please refer to the sample and let me know if you have any issue when running it.
Let me know if you’re aiming to achieve something similar in your application.
Ok, I see. You have to configure columns manually. If you set autoGenerateColumns to true nothing appears on the screen.
It is not recommended to use autoGenerateColumns when the initial data source set is empty.
In this case the grid will have nothing from which to actually generate its columns so the columns collection will be empty.
The schema for the data source is generated only once so even if the dataSource is changed at a later point the columns collection would not be re-generated and will remain empty.
Let me know if you have any questions.