Igniteui-angular: Hide expansion indicator in hierarchical grid if no data found

[ammritt]

Question

Run stackblitz example below, the first row doesn't have any data for Albums or Tours.

"Tours": [],
"Albums": []

In that case, how can I hide the expansion indicator to have the row just a normal grid row so the user knows without expanding the row that data is empty?

The example here:

https://stackblitz.com/edit/angular-oq8q3z

Result

Expansion indicators are shown for empty row-island grid

Expected result

No expansion indicator should be displayed

[skrustev]

@ammritt Currently there is no exposed way to not show the row expansion indicator because by design it should be always visible. This is because child data can be loaded remotely and in order to know if child grid is actually empty it needs to be expanded first.

[mpavlinov]

@SlavUI @kdinev @StefanIvanov There is a similar request on the Infragistics Ideas page: https://www.infragistics.com/community/ideas/i/ignite-ui-for-angular/only-show-expandable-icon-if-there-is-data-for-the-row

[Failender]

But sometimes we already know that there will be no data to be loaded remotely (e.g. if we set a flag in the row that will tell us)
So I think we should either get a configurable flag that the grid will look into when fetching the row data or a way to pass in a function that will return true if expandable and false if not expandable for given row

[mpavlinov]

@Failender @ammritt We will discuss this feature request in the next couple of days and will update you on how we're going to proceed.

[Failender]

What is the status on this feature? @mpavlinov

[kdinev]

@mpavlinov @Failender We can look for a boolean flag in the data record, something like 'hasChildren' and if that is set to false, then expansion indicator is now shown. Otherwise I don't see how we can determine whether certain records would have or not have children, especially in remote data source scenario.

[MayaKirova]

@kdinev How about we let the users template the expansion indicator? That way they can decide themselves when to show/hide it.

[kdinev]

@MayaKirova Can you show an example of how this would look like, in terms of what the developer would need to do to accomplish the scenario?

[Failender]

I think a boolean flag would be more then enough for this. At best we would make the field-name for the flag configurable. something like .
If this flag is not configured make every row expandable, otherwise look at the field and check if it true

[MayaKirova]

@kdinev Similar to other features that allow templating - defining an ng-template marked with a directive inside the grid, for example something like:

      <ng-template igxHierachicalRowExpander let-hierarachicalRow>
            <div (click)="hierarachicalRow.toggle()" class="igx-grid__hierarchical-expander" *ngIf="MYCONDITION" #expander>
                <igx-icon *ngIf="!hierarachicalRow.expanded" fontSet="material">expand_more</igx-icon>
                <igx-icon *ngIf="hierarachicalRow.expanded" fontSet="material">expand_less</igx-icon>
            </div>
      </ng-template>

[kdinev]

@Failender The template proposal that @MayaKirova has posted looks good, since it would cover more customization scenarios than the property, which will cover only the expander show/hide.

[MayaKirova]

This should be resolved with the adding of the expand/collapse templates. With it you can now hide the expansion indicator based on the rowData, for example:

<ng-template igxRowCollapsedIndicator let-row>
<igx-icon [style.visibility]='isRecordExpandable(row.rowData) ? "visible" : "hidden"' (click)='row.toggle()' role="button" fontSet="material">add</igx-icon>
</ng-template>

[zdrawku]

Thank you, Maya, the beta version with this functionality is available now