Hierarchical grid - hide islands

[OrigamiPT]

Hello, is there any way to hide an island in a record if the island has no data?

what i want to avoid is to have a grid there where there is no data to show

[ChronosSF]

Hello @OrigamiPT ,

You can try the following approach:

1. Subscribe to gridCreated for the row islands that can produce empty grids.
2. Check if the grid doesn't have data and if so - hide it with display: none

<igx-hierarchical-grid>
        <igx-row-island (gridCreated)="onGridCreated($event)"></igx-row-island>
</igx-hierarchical-grid>

onGridCreated($event: IGridCreatedEventArgs) {
   if (!$event.grid.data || $event.grid.data.length === 0) {
       $event.grid.nativeElement.style.display = "none";
   }
}

[OrigamiPT]

Tried this code and it simply doesn't show any grid at all, i am using the example from infragistics with the Singers and as soon as i apply this code no grid island comes to display

[ChronosSF]

Sorry I was trying out a few things and ended up pasting the wrong snippet. The correct event to use is gridInitialized, not gridCreated as it is fired after the data source is populated for the default local data scenario. I have to mention this will have to be modified for remote load on demand for example, as it relies on testing whether or not the grid is bound to data containing at least one record. In remote scenarios this test has to be done after data is fetched for example (or some other application-specific implementation).

The sample you mentioned also has a row that has both row islands with empty data - the one for Mar Rueda. In this case it's better to hide the expansion indicator for that row. This is done using the following mechanism - https://www.infragistics.com/products/ignite-ui-angular/angular/components/hierarchicalgrid/hierarchical-grid#hideshow-row-expand-indicators , though it requires that the data is prepared to allow it.