Forums Ignite UI for Angular
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
Close
Baron Ntambwe
15
Populating igx-tree-grid with an observable collection from a Web Api
posted

Hi,

I am trying populate my igx-tree-grid with observable collection coming from my web api, but im getting this error:

IgxTreeGridComponent.html:48 ERROR TypeError: Cannot read property 'length' of undefined
at IgxTreeGridHierarchizingPipe.push../node_modules/igniteui-angular/fesm5/igniteui-angular.js.IgxTreeGridHierarchizingPipe.hierarchizeRecursive (igniteui-angular.js:60584)
at IgxTreeGridHierarchizingPipe.push../node_modules/igniteui-angular/fesm5/igniteui-angular.js.IgxTreeGridHierarchizingPipe.transform (igniteui-angular.js:60462)
at checkAndUpdatePureExpressionInline (core.js:19331)
at checkAndUpdateNodeInline (core.js:19888)
at checkAndUpdateNode (core.js:19846)
at debugCheckAndUpdateNode (core.js:20480)
at debugCheckDirectivesFn (core.js:20440)
at Object.eval [as updateDirectives] (IgxTreeGridComponent.html:49)
at Object.debugUpdateDirectives [as updateDirectives] (core.js:20432)
at checkAndUpdateView (core.js:19828)


Here is how I fetching the data before binding it:

this.dataService.getRemoteData().subscribe(data=> {
this.dataSource= data as any[]; console.log(data)});


Funny enough, the console.log(data) is displaying the data fetched from the server.
  • 2180
    Offline posted

    Hello,

    The reason for this error is probably that the dataSource is undefined before the remote data is loaded. You could either initialize the dataSource to an empty array, or you could bind directly to the Observable using an async pipe like this:

    this.dataSource = this.dataService.getRemoteData();

    In the template:

    <igx-tree-grid [data]="dataSource | async">

    Hope this helps.

    Thanks,

    Diyan Dimitrov