3

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.

BillF
  • 804
  • 10
  • 20
Italik
  • 696
  • 2
  • 18
  • 35

1 Answers1

1

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

BillF
  • 804
  • 10
  • 20
  • This was only example. But how to block the whole last column? So, when I clicked at this column the color of row will not change. – Italik Aug 03 '17 at 13:19
  • Are you saying that you want the row to NOT select when you click anywhere else in the column? – BillF Aug 03 '17 at 13:24
  • Yup. Because 'selectionMode="single"''works for each column. I want to prevent this click on the las column. – Italik Aug 03 '17 at 13:31
  • 1
    Looking at the source code for the component, I don't see any way you can do that, as is. You'd probably have to edit the component. – BillF Aug 03 '17 at 13:36
  • If I have answered your question to your satisfaction, please mark it as the answer. – BillF Aug 03 '17 at 18:48