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
Simon Lübker
15
cell.cellID.rowIndex is changed after expanding rowIsland in Hierarchical-Grid
posted

Hello,

I have problems using the cell.cellID.rowIndex property. It changes after expanding a grid-island.

For example:

I have two entries in a hierarchical-grid if the first one is expandended I'm not able to use a function with the cell.cellID.rowIndex as parameter on the second entrie becouse the  cell.cellID.rowIndex changes to: 2 therefore it results in an error: undefined becouse data[2] is not defined.

Code example:

example.component.html

<igx-hierarchical-grid #hGridTour
                       [data]="data"
                       [primaryKey]="'TourNr'"
                       [autoGenerate]="false"
                       [allowFiltering]="true"
                       [paging]="true"
                       [showToolbar]="true">
...

    <igx-column header="Dispo" [cellClasses]="dispoStyleClasses" [filterable]="false">
      <ng-template igxCell let-cell="cell">
        <button igxButton="icon"
                (click)=initDispose(cell.cellID.rowIndex)"
                

          <igx-icon>edit</igx-icon>
        </button>
        <button igxButton="icon"
                (click)="finalizeTour(cell.cellID.rowIndex)">


         <igx-icon>check</igx-icon>
    </button>
  </ng-template>
</igx-column>

...

example.component.ts

...

finalizeTour(rowIndex: number) {
  console.log('finalize:', rowIndex); // rowIndex is 2 instead of 1 if first row is expanded button from second entrie is clicked
  const id: bigint = this.data[rowIndex].TourID; // therefore error: undefined 
...
}

...
Is this behavior desired? 
What property or else can i use to achieve, that i can find the right data if some row-islands are expanded?
Parents
No Data
Reply
  • 485
    Offline posted

    Hello Simon,

     

    Thank you for posting in our forum.

     

    Using row indexes is not always a reliable way to get a certain row – I would suggest that you use the rowID instead – this is the unique key the grid uses to distinguish different rows.

     

    Try changing the part of the template where you pass the row index to the method, and pass the cell instead, like this:

    <button igxButton="icon"
        (click)="finalizeTour(cell)">
        <igx-icon>check</igx-icon>
</button>

     

    Then in the method the type of the cell would be IgxGridCellComponent, and you would be able to access the row ID like this:

        finalizeTour(cell: IgxGridCellComponent) { 
        let clickedRow = this.getRowByKey(cell.cellID.rowID)
        console.log(clickedRow) 
      }

     

    That would allow you to filter the data records by this rowID, find the matching record and do whatever you need afterwards.

    For example if you have some data and the primary key is CustomerID, then the rowID should match it, and you could filter the data record like this:

    let dataRecord = this.data.filter((row) => {
    return row.CustomerID === cell.cellID.rowID
})

     

    Please let me know if you need some further assistance or if I have somehow misunderstood your requirements.

Children
No Data