Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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>
like image 282
Gayathri Avatar asked Sep 03 '25 15:09

Gayathri


1 Answers

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">
like image 65
Catherine Avatar answered Sep 05 '25 06:09

Catherine