How to toggle disabled property from button if it's row has been selected by checkbox in a p-datatable

Question

I am currently developing the user interface of a web application using angular6. I have a p-dataTable component (primeNG) with several rows, each row has as a first column a checkbox and as last one a disabled button by default.

The goal is opening a dialog if I select a row by clicking it's checkbox and then clicking it's dialog trigger button after unable that button (and just that one, not the rest of row buttons).

I thought I could get the row selected index and style the button via CSS with nth-child(index) but I read p-columns in a p-datatable doesn't create an index.

It looks like something trivial, but I'm not able to unable just the button of the selected row.

I'll appreciate your help.

That's a simplified markup example:

    <p-datatable [value]="data" scrollable="true" scrollHeight="350px [(selection)]="selectedItems" columnResizeMode="expand">
        <p-header>
            <div class="ui-helper-clearfix">Example Table</div>
        </p-header>
        <p-column class="checkbox" selectionMode="multiple"></p-column>
        <p-column class="data-column" field="dataColumn1" header="Column1"></p-column>
        <p-column class="data-column" field="dataColumn2"header="Column2"></p-column>
        <p-column>
            <ng-template>
                <button type="button" class="btn" icon="fa fa-user" [disabled]="??????"></button>
            </ng-template>
        </p-column>
    </p-datatable>

Thanks in advance and greetings!

You need to test if selectedItems includes the row. I've never used primeng, but the selection example of the datatable documentation shows that you can use let-rowData to access to the current row. — JB Nizet

rmi8092 rmi8092 · Accepted Answer · 2018-11-27T09:54:33

I've found a solution:

First of all I need a ng-template inside my checkbox p-column in order to have a rowIndex variable to be read in the class component through a function triggered in the event onChange of the checkbox.

There I save this value in a class variable called "indexSelected" that I'll be watching in the ng-template of the buttons p-column. I'll be comparing this rowIndex value with the "indexSelected" to keep disabled or not my buttons.

This is my code:

Template:

   <p-datatable [value]="data" scrollable="true" scrollHeight="350px [(selection)]="selectedItems" columnResizeMode="expand">
    <p-header>
        <div class="ui-helper-clearfix">Example Table</div>
    </p-header>
    <p-column selectionMode="multiple" [styleClass]="'colsmall'">
        <ng-template let-riCheck="rowIndex" pTemplate="body">
            <p-checkbox  (onChange)="selectRow(riCheck); "></p-checkbox>
        </ng-template>
    </p-column>
    <p-column class="data-column" field="dataColumn1" header="Column1"></p-column>
    <p-column class="data-column" field="dataColumn2"header="Column2"></p-column>
    <p-column header="Acciones" styleClass="colmedium" frozen="true">
        <ng-template pTemplate="body" let-ri="rowIndex">
            <button type="button" pButton icon="fa-user" (click)="goToEditContact();" [disabled]="indexSelected != ri"></button>
            <button type="button" pButton icon="fa-ellipsis-h" class="ui-button-inverted" (click)="mostrarMasOpciones($event, op)" [disabled]="indexSelected != ri"></button>
        </ng-template>
    </p-column>
</p-datatable>

Class Component:

...

selectRow (index) {
    this.indexSelected = index;
}

...

How to toggle disabled property from button if it's row has been selected by checkbox in a p-datatable

1 Answers