Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
angular2, rxjs Observables and datasource

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. 

  • 29117
    Offline posted

    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.gridOptions = {



    ... }

    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.gridOptions.dataSource =;


    Let me know if this solves your issue.


    Best Regards,

    Maya Kirova

    Infragistics, Inc.



Reply Children