Hide IgxGrid Master Detail Expand Icon When No Details

I have a master detail grid where not all master rows will have child details. Currently, the rows with missing details still show the drop down arrow for the detail template. I would like hide the arrow, or template, when the details are missing. I think the trick may be an *ngIf on the ng-template, but I can’t seem to reference the details object to test if it is ‘nothing’ or an empty colleciton.

<ng-template igxGridDetail let-weekdays *ngIf=”weekdays.details.length > 0>

…

</ng-template>

I think I just answered my question. Instead of using igx-grid, use  igx-hierarchical-grid. Then set the hasChildrenKey property to a property on your parent object that returns true|false if the object has children.

I believe I simply answered my own question. Use igx-hierarchical-grid instead of igx-grid.  

geometry dash

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.

       keyboard_arrow_right



       keyboard_arrow_down

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

Lucky 97 Game is popular gaming application in Pakistan that brings casino betting games like slots machines and card games with multiple options. https://lucky-97-game.com/