Forums Ignite UI for Angular
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Shobhana Suara
1415
Igx Hierarchical grid expand of child grid shows incorrect data
posted

Hi team,

I am using Infragistics version 9.1.28 and will update in upcoming month but this is requirement i have to deliver.

Issue: Using Hierarchical Grid load on demand feature. We are expanding first child row by default, the first child row has no data.

When i expand the second child row, it call the api and data is displayed. But the issue is when i hover on first child expand icon it displays second row child data.

Is there any feature where if i expand the second child row than first child collapses and everytime i click on the expand/collapse icon, the OnGridCreated() event is triggered?

TS: 



Please note as this is an ongoing project so please reply ASAP.

Parents
No Data
Reply
  • 420
    Offline posted

    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

Children