Igniteui-angular: Using hierarchical grid as a normal grid when row-island key is not defined

[ammritt]

Question

In my app I am trying to use the hierarchical grid as my main grid and render it as a normal grid or hierarchical based on if an Input islandGridDataKey is supplied.

Everything works fine as I can set the [islandGridDataKey]="'Albums'" and hierarchical grid will be rendered properly. Not setting this Input will render my grid is normal regular grid.

Issue I am having is the 'Error: Cannot read property 'hgridAPI' of null' which causes further issues like calling markForCheck() for the grid or any row-grids doesn't work properly.

Stackblitz link: https://stackblitz.com/edit/angular-row-island-issue
How can I achieve the above requirement and not have this error?

• igniteui-angular version: 7.3.0
• browser: Any

[mpavlinov]

@ammritt We haven't accounted for this scenario into the specification and as a result it was not tested. The fact that igxHierarchicalGrid transforms visually as igxGrid is a side effect and I would say it's not an intended behavior.
What I can suggest is that you setup both igxGrid and igxHierarchicalGrid and hide/show them with *ngIf.

[kdinev]

@mpavlinov What you're describing sounds like a bug. The Hiearchical Grid should function with or without row islands. I updated the stackblitz @ammritt provided and put the row island in an *ngIf which is a perfectly valid scenario and I get the same exception.