CODEWITHSUNDEEP
angularprimengprimeng-datatable
Gayathri
Gayathri

Reputation: 1896

onRowSelect / onRowClick not getting triggered at all. - Primeng table - Angular

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>

Upvotes: 4

Views: 13125

Answers (3)

Victor Josey
Victor Josey

Reputation: 11

You are missing [pSelectableRow]="col" on tr tag for the table body.

Upvotes: 1

Catherine
Catherine

Reputation: 153

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">

Upvotes: 8

Philip Antin
Philip Antin

Reputation: 136

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.

Upvotes: 4

Related Questions