1

I actually require to traverse to another component with the data selected on click of row. I have been using p-table to perform the same. I have totally no idea why. onRowClick / onRowSelection doesn't get triggered at all.I even added a console.log string to see if method is atleast called but no it isn't. Even [(selection)] doesn't perform well. There's no problem with p-table since pagination and global filters are actually working well and there's no issues in it. But this is something i couldn't figure out why. Primeng version "primeng": "^7.1.3"

<p-table [columns]="cols" [value]="companiesList"  selectionMode="single"
   (onRowClick)="handleSelect($event)" 
  >
      <ng-template pTemplate="header" let-columns>
          <tr>
              <th *ngFor="let col of columns" [pSortableColumn]="col.field">
                  {{col.header}}
                  <p-sortIcon [field]="col.field"></p-sortIcon>
              </th>
          </tr>
      </ng-template>
      <ng-template pTemplate="body" let-rowData let-columns="columns">
          <tr>
              <td *ngFor="let col of columns">
                      {{rowData[col.field]}}
              </td>
          </tr>
      </ng-template>
  </p-table>
Gayathri
  • 1,776
  • 5
  • 23
  • 50

2 Answers2

4

Even though this question was posed long ago, maybe this will help others.

The event is not onRowClick(), it's onRowSelect() so you need to say:

    <p-table [columns]="cols" [value]="companiesList"  selectionMode="single"
   (onRowSelect)="handleSelect($event)"

There is also an onRowUnselect() available. Also be sure to indicate the rows are selectable within the rows' html:

<ng-template pTemplate="body" let-rowData let-columns="columns">
   <tr [pSelectableRow]="rowData">
Catherine
  • 113
  • 2
  • 11
3

Possible alternative solution: in the <tr> tag, add (click)="handleSelect(rowData)" and remove the (onRowClick) handler.

Rationale:

  • If the (onRowClick) binding isn't working, bind to a different event.
  • The rowData from your let-rowData iteration has the information from the row, which appears to be the information you need to pass to the other component.
  • This approach has been successful for me in the past with a p-table to catch when the user clicks on a row.
Philip Antin
  • 116
  • 1
  • 7
  • even i thought of click. but i don't see "value" object in event.target. Ain't sure if am checking for a wrong object though. – Gayathri Jul 05 '19 at 13:21
  • Ack! You're right. I merely copied your function, which used $event, instead of passing it the rowData object from the iteration. I've edited my post with the correction (both code and explanation). I should have looked at my old code instead of working from memory.... – Philip Antin Jul 05 '19 at 13:36
  • Never knew what let-rowData was meant for until you said . thanks much Philip! THis is more straightforward than any. – Gayathri Jul 05 '19 at 13:40