Hello,

I have been looking into your question and what I understand from the information provided is that you have a hierarchical grid in which the first row is expanded by default, then you expand the second row with the data and when you hover over the first, the data from the second is loaded. What you want to achieve as a first requirement is to collapse the first row when expanding the second.

To achieve your requirements after expanding the first row by default with the expandRow method you can then handle the rowToggle event of the hierarchical grid. The event is fired when a row of the hierarchical grid is expanded or collapsed. After the event is fired, you will check whether it is fired for the second line of its rowID (as id matches with the primaryKey property set) and whether the row is expanded with the expanded property of the event, which should be true. If the given requirements are met then you have expanded the second row and can collapse the first with the collapseRow method of the grid.

<igx-hierarchical-grid
     #hierarchicalGrid
     [data]="localdata"
     [height]="'600px'"
     [width]="'100%'"
     [primaryKey]="'ID'"
     (rowToggle)="rowToggle($event)"
   ></igx-hierarchical-grid>

public rowToggle(event){
         if(event.rowID === 1 && event.expanded === true){
             this.hGrid.collapseRow(0);
         }
     }

Regarding your next question, you can handle the expand and collapse icon templates by creating two ng-template elements with the igxRowCollapsedIndicator and igxRowExpandedIndicator directives for the expand and collapse icon. As in the given elements, you will place the corresponding icons and on them you can handle the click event, in which, when it fires, you will perform your sequential processing as in the OnGridCreated event.

<ng-template igxRowCollapsedIndicator let-row>
       <igx-icon (click)="yourFunction(row)">keyboard_arrow_right</igx-icon>
     </ng-template>

     <ng-template igxRowExpandedIndicator let-row>
       <igx-icon (click)="yourFunction(row)">keyboard_arrow_down</igx-icon>
     </ng-template>

The described scenario could be observed here:

In addition, I have prepared small sample illustrating this behavior which could be found here. Please test it on your side and let me know how it behaves.

If you require any further assistance on the matter, please let me know.

Regards,

Georgi Anastasov

Entry Level Software Developer

Infragistics

I have been looking into your question and regarding the new requirements you have for only one row with row island child data to expand at one time, what I could suggest you as an approach is to handle the onRowToggle event of hierarchical grids again.

<igx-hierarchical-grid
    #hierarchicalGrid
    [data]="localdata"
    [primaryKey]="'ID'"
    (rowToggle)="rowToggle($event)"
  ></igx-hierarchical-grid>

When expanding a given row, you will check if we actually have a collapse or expand again with the expanded property of the event and, in addition, you will have a created variable that will keep the row id of the row that is being expanded, and in the check you will also check if you have not already taken the row id and is it different from what is being expanded.

public rowToggle(event){
    if(event.expanded && this.rowExpandID !== event.rowID){
    }
}

If you have a row expand and its id is different from what is stored in the variable then you will cancel the event itself with the cancel property of the event.  After you cancel the event, you will get this redid of the row that is currently being expanded.

event.cancel = true;
this.rowExpandID = event.rowID;

After that, in the setTimeout function, with a given short period of time, you will collapse all rows that are currently expanded with the collapseAll method, or that is, you will collapse the previous expanded row. Finally, again in another setTimeout function with a slightly longer time than the first one, you will expand this row for which the toggle event was fired, as with the expandRow method, and you will pass the variable in which its rowID is kept.

setTimeout(() => {
                this.hGrid.collapseAll();
}, 50);

setTimeout(() => {
                this.hGrid.expandRow(this.rowExpandID)
}, 200);

To summarize, if you have a row expansion and it is a new row that is not expanded, you first cancel the event and take its id, then collapse the previous row and finally expand the one for which the event was fired, in this way you will fulfill the requirement that only one row be expanded at one time.

Regarding your next question about calling your custom onGridCreated() function when the row expand icon is clicked what I could again suggest and I think will accomplish your requirements is to handle the ng-template element with the igxRowCollapsedIndicator directive and in it put the igx-icon element with keyboard_arrow_right text for the row expand icon. On this icon you can handle the click event and execute your given function or create a new function that performs the same logic as your onGridCreated() function or simply call it in the body of the click function.

<ng-template igxRowCollapsedIndicator let-row>
      <igx-icon (click)="clickFunction(row)">keyboard_arrow_right</igx-icon>
    </ng-template>

public clickFunction(row){
         this.OnGridCreated()
}

The described scenario could be observed here:

In addition, I have prepared small sample illustrating this behavior which could be found here. Please test it on your side and let me know how it behaves.

If you require any further assistance on the matter, please let me know.

Regards,

Georgi Anastasov

Entry Level Software Developer

Infragistics

I have been looking into your question and onRowToggle event didn't help you because you have unique IDs for each row what you can do in this case to implement your requirement when you expand the second row then the first one which is by default expanded to collapse is to use the getRowByIndex method. When the row's toggle event is fired, you'll access the second row with this method, and so you can access its id with rowID property I think in your version 9.1.28. So, you will then check if the event is onRowToggle whether the event is executed for the given second row, that is, whether the second row is toggled and whether it is expanded as explained in the previous answer with the expanded property. If the check is executed, you can similarly take the rowID of the first row with the getRowByIndex method and collapse it afterwards with the collapseRow method.

public rowToggle(event){
        let secondRowID = this.hGrid.getRowByIndex(2).data.ID;
        if(event.rowID === secondRowID && event.expanded === true){
            let firstRowID = this.hGrid.getRowByIndex(0).data.ID;
            this.hGrid.collapseRow(firstRowID);
        }
    }

Currently, the igx-hierarchical grid does not offer an event to be triggered when the mouse enters or leaves the igx-icon element of the rows, but still this requirement of yours can be achieved with two possible approaches.

The first approach is using the ng-template with the igxRowCollapsedIndicator and igxRowExpandedIndicator directives that I mentioned in my previous answer. On the icon that you will place in the ng template, as a click event, you can also put a mouseenter event that is triggered when the mouse hovers over the given icon. After that you can execute your custom function to check if you have hovered over the icon of the first row by passing the row to the function and with it you will access the index, if it is 0 then you have hovered over this first icon.

<ng-template igxRowCollapsedIndicator let-row>
      <igx-icon (mouseenter)="mouseEnterFunction(row)" (click)="yourFunction(row)">keyboard_arrow_right</igx-icon>
    </ng-template>

    <ng-template igxRowExpandedIndicator let-row>
      <igx-icon (mouseenter)="mouseEnterFunction(row)" (click)="yourFunction(row)">keyboard_arrow_down</igx-icon>
    </ng-template>

public mouseEnterFunction(row){
        if(row.index === 0){
            //your code here
        }
    }

The next approach is entirely with JavaScript, handling the ngAfterViewInit hook and getting the elements with class .igx-icon with the getElementsByClassName method. Then one can check what is the index of the first icon on the first row in the returned array and get that icon as the HTMLElement. After that after load in setTimeout function, an event listener addEventListener for the mouseenter event can be put on it and a given code can be executed only when hovering over it.

let icons = document.getElementsByClassName('igx-icon');
let firstRowIcon = icons[2] as HTMLElement;

        setTimeout(() => {
            firstRowIcon.addEventListener('mouseenter', (event) => {
                //your code here
             });
        }, 500);

The described scenario could be observed here:

In addition, I have prepared small sample illustrating this behavior which could be found here. Please test it on your side and let me know how it behaves. If this is not an accurate demonstration of what you are trying to achieve, please feel free to modify it and send it back to me along with steps to reproduce. Alternatively, if the behavior cannot be replicated, please feel free to provide your own sample.

Thank you for your cooperation.

Regards,

Georgi Anastasov

Entry Level Software Developer

Infragistics