Hello,

I am glad that you find solution to your requirements using our components.

However, I have been looking into your question and I could suggest you as an approach for both grids, the igx-grid master detail and for the igx-hierarchical grid. So, you could choose to use one of the two grids with this approach or the already found solution according to your requirements.

What will be used are two ng-templates with the igxRowCollapsedIndicator and igxRowExpandedIndicator directives which are responsible for the expand and collapse icons in the igx-grid master details and in the igx-hierarchical-grid. As in the two templates, the two icons with the igx-icon component will be added, to which the text keyboard_arrow_right and keyboard_arrow_down will be submitted. After that, the style.visibility property of the two icons will be handled according to a function that will determine whether for the given row there is certain data, whether to show or hide the expand and collapse icons.

<ng-template igxRowCollapsedIndicator let-row>
       <igx-icon [style.visibility]="show(row) ? 'visible' : 'hidden'"
         >keyboard_arrow_right</igx-icon>
</ng-template>

<ng-template igxRowExpandedIndicator let-row>
       <igx-icon [style.visibility]="show(row) ? 'visible' : 'hidden'"
         >keyboard_arrow_down</igx-icon>
</ng-template>

The function will take the given row and check with its date property if it contains the data that should be displayed in the master detail of the igx-grid or in the child row-island of the igx-hierarchical grid. If there is data it will return true and the icon will be visible, if there is no data it will return false, and the icon will be hidden.

public show(row) {
         if (row.data.country) {
           this.hasData = true;
         } else {
           this.hasData = false;
         }
         return this.hasData;
     }

However, after we hide the icon, it will still be clickable because it will still be on the given row. This is why we will have to handle the rowToggle event of the grid, which is fired when the expand icon is pressed, that is, when the given row is toggled. When the event is fired, it will be checked whether there is data for the given row that we want to expand in the master detail grid or in its child row-island, and if there is, the row will be expanded, and if there is no data, the event will be canceled and so it will not be expanded in the cases if the hidden expand icon is clicked.

public rowToggle(event){
        if(!event.rowID.country){
            event.cancel = true;
        }
    }

The described scenario could be observed here:

In addition, I have prepared a small sample illustrating this behavior in igx-grid master details which could be found here and another small sample illustrating this behavior in igx-hierarchical-grid here.

Thank you for your cooperation.

Regards,

Georgi Anastasov

Entry Level Software Developer

Infragistics