CODEWITHSUNDEEP
angulartypescript
alehn96
alehn96

Reputation: 1393

Primeng How get rowIndex of row expanded?

 <p-dataTable [value]="services" [paginator]="true" expandableRows="true" rowExpandMode="single">
...</p-dataTable>

exists some like this

<ng-template let-col let-period="rowData" let-ri="rowIndex"   pTemplate="body">...</ng-template>

for DataTable

Upvotes: 14

Views: 46840

Answers (3)

Abdus Salam Azad
Abdus Salam Azad

Reputation: 5512

You can use it:

<ng-template pTemplate="body" let-record="$implicit" let-rowIndex="rowIndex">
                        <tr [pSelectableRow]="record">
                            <td>
                                {{rowIndex + 1}}

Upvotes: 9

sabithpocker
sabithpocker

Reputation: 15576

<ng-template let-i="rowIndex" let-line pTemplate="rowexpansion">

rowIndex is probably added to rowExpansion now, works for me in latest version

Upvotes: 9

Aravind
Aravind

Reputation: 41581

In your ng-template for the expansion of row use the below code 

<ng-template let-i="rowIndex">

   <button (click)="expand(i)"> expand </button>
</ng-template>

In the button that is clicked during expansion use the below code to get the rowindex

expand(i){
    //... your logic to expand the row...
    this.expandedRowIndex = i;
}

 <p-dataTable [value]="services" [paginator]="true" expandableRows="true" rowExpandMode="single" (onRowExpand)="onRowExpand($event)">

Update 1: As you are clicking the entire row to be expanded. You can use the onRowExpand property of the <p-datatable> to achieve this.

onRowExpand(cc){
    console.log(cc)
    //logs the entire object which is clicked     
  }

This method is triggered when the row is expanded

enter image description here

LIVE DEMO

Upvotes: 21

Related Questions