CODEWITHSUNDEEP
angularfont-awesomeprimengprimeng-datatable
Italik
Italik

Reputation: 696

How to prevent click on one of column in row - primeNG dataTables?

I have table in primeNG:

 <p-dataTable [value]="cars" selectionMode="single"  
(onRowSelect)="onRowSelect($event)">
  <p-column field="vin" header="Vin"></p-column>
  <p-column field="year" header="Year"></p-column>
  <p-column field="brand" header="Brand"></p-column>
  <p-column styleClass="grid-col-btn" [style]="{'width':'58px'}">
    <ng-template let-gateway="rowData" pTemplate="body">
     <button type="button" class="btn btn-default btn-flat" 
(click)="deleteCarsFromList(car)"><i class="fa fa-trash-o"></i>
     </button>
    </ng-template>
  </p-column>
</p-dataTable>

Because I use font awesome icon inside button the action after click doesn't work properly. When I click directly in icon I cannot trigger method (click), because action is from (onRowSelection). How can I prevent click on this specific column in table? To be sure that every time I use method added to button not whole table.

Upvotes: 3

Views: 2755

Answers (1)

BillF
BillF

Reputation: 864

One problem I can see from your shared code, is that your <ng-template> is using let-gateway to assign your template variable, but you are using car inside your template.

I have provided a plnkr that shows it working correctly

Upvotes: 1

Related Questions