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
Théo Buraglio-Mauron
50
igx-hierarchical-grid load on demand bug on expand
posted

Hi,

I'm using a igx-hierarchical-grid with the load on demand for sub grids as stated in the demo : https://es.infragistics.com/products/ignite-ui-angular/angular/components/hierarchicalgrid/hierarchical_grid.html

The problem is that when I expand a sub grid I get 2 errors 

ERROR
Error: Cannot read property 'transactions' of undefined

ERROR
Error: Cannot read property 'instance' of undefined

I can't figure out what is wrong with my code

There is a full repro here : https://stackblitz.com/edit/bug-igx-hierarchical-grid

Can you help me with this ?

PS : On the stackblitz IGX version is 9.0.1 but I got the same problem on my repo where IGX version is 8.2.6
PPS : You have more details in the error if you run this locally, see below

IgxHierarchicalGridComponent.html:80 ERROR TypeError: Cannot read property 'transactions' of undefined
at IgxGridTransactionPipe.transform (igniteui-angular.js:57538)
at checkAndUpdatePureExpressionInline (core.js:43600)
at checkAndUpdateNodeInline (core.js:44371)
at checkAndUpdateNode (core.js:44306)
at debugCheckAndUpdateNode (core.js:45328)
at debugCheckDirectivesFn (core.js:45271)
at Object.eval [as updateDirectives] (IgxHierarchicalGridComponent.html:83)
at Object.debugUpdateDirectives [as updateDirectives] (core.js:45259)
at checkAndUpdateView (core.js:44271)
at callWithDebugContext (core.js:45632)

IgxHierarchicalGridComponent.html:80 ERROR TypeError: Cannot read property 'instance' of undefined
at IgxGridForOfDirective._recalcOnContainerChange (igniteui-angular.js:11411)
at IgxGridForOfDirective.ngOnChanges (igniteui-angular.js:11650)
at checkAndUpdateDirectiveInline (core.js:31906)
at checkAndUpdateNodeInline (core.js:44367)
at checkAndUpdateNode (core.js:44306)
at debugCheckAndUpdateNode (core.js:45328)
at debugCheckDirectivesFn (core.js:45271)
at Object.eval [as updateDirectives] (IgxHierarchicalGridComponent.html:83)
at Object.debugUpdateDirectives [as updateDirectives] (core.js:45259)
at checkAndUpdateView (core.js:44271)

Parents
  • 40
    Verified Answer
    Offline posted

    Hi Théo,

    Thank you for contacting the Infragistics Support. And thank you for the sample as well!

    After a brief investigation, I could state that the reason you get these errors is because at that point, the grid that’s passed in the event parameter of the onGridCreated event is not yet loaded.

    I’d suggest wrapping the event.grid.data and the event.grid.cdr.detectChanges(); in a setTimeout. In this way, the operations that are invoked inside the callback function of the setTimeout would be executed in the next event loop, where the grid from the event will be taking place. I forked your sample and modified it to illustrate my explanations.

    The scenario that you have approached though, is an obfuscating one because the load-on-demand feature supposes that you would have an outgoing http request that will take some time to get resolved (and that’s the most probable reason the grid’s not yet ready and needs the current event loop to be finished). In your sample, the data is being loaded instantly, just as in a regular hierarchical grid and that might be one reason not to have a track of the grid so far. In order to avoid further confusions and in case you are planning to continue with the use case that you are approaching so far, I’d suggest you to use a ViewChild reference to the grid and modify the data using it.

    Even though, I logged an issue that we would refer to in order to find the reason, because of which the event parameter requires a new event loop. You can catch up with it here.

    If you have any further questions, regarding this matter, feel free to get in touch with me.

    Best regards,
    Petko Bozhinov,
    Infragistics, Inc.

Reply Children