PrimeNg - Data Table Selection Values with Nested Components

Question

I have a p-dataTable with nested p-dropdown components. On selection of a row, how can I get the selected values of the row? In the selection callback I receive the array backing each dropdown, and not the selection itself.

<p-dataTable [value]="affiliates" sortField="name" dataKey="id"  selectionMode="single" (onRowSelect)="onRowSelect($event)" [rows]="15" [paginator]="true" [pageLinks]="10">
    <p-column field="name" header="Name" sortable="true" [filter]="true" filterPlaceholder="Search" filterMatchMode="contains"></p-column>    
    <p-column field="package" header="Packages">
        <ng-template let-affiliate="rowData" pTemplate type="body">
            <p-dropdown [options]="affiliate.packages" dataKey="label"></p-dropdown>
        </ng-template>
    </p-column>
    <p-column field="country" header="Countries">
        <ng-template let-affiliate="rowData" pTemplate type="body">
            <p-dropdown [options]="affiliate.countries" dataKey="label"></p-dropdown>
        </ng-template>
    </p-column>
    <p-column field="device" header="Devices">
        <ng-template let-affiliate="rowData" pTemplate type="body">
            <p-dropdown [options]="affiliate.devices" dataKey="label"></p-dropdown>
        </ng-template>
    </p-column>
    <p-column header="Actions">

    </p-column>
</p-dataTable>

score 0 · Answer 1 · edited Feb 01 '18 at 09:09

You can access the row data using the event.data property in the callback event.

<p-dataTable [value]="affiliates" sortField="name" dataKey="id"  selectionMode="single" (onRowSelect)="onRowSelect($event)" [rows]="15" [paginator]="true" [pageLinks]="10">
    <p-column field="name" header="Name" sortable="true" [filter]="true" filterPlaceholder="Search" filterMatchMode="contains"></p-column>    
    <p-column field="package" header="Packages">
        <ng-template let-affiliate="rowData" pTemplate type="body">
            <p-dropdown [(ngModel)]="name.selectedPackage" [options]="affiliate.packages" dataKey="label"></p-dropdown>
        </ng-template>
    </p-column>
    <p-column field="country" header="Countries">
        <ng-template let-affiliate="rowData" pTemplate type="body">
            <p-dropdown [(ngModel)]="country.selectedCountry"
             [options]="affiliate.countries" dataKey="label"></p-dropdown>
        </ng-template>
    </p-column>
    <p-column field="device" header="Devices">
        <ng-template let-affiliate="rowData" pTemplate type="body">
            <p-dropdown [(ngModel)]="device.selectedDevice"
             [options]="affiliate.devices" dataKey="label"></p-dropdown>
        </ng-template>
    </p-column>
    <p-column header="Actions">

    </p-column>
</p-dataTable>

Call back event will look as

onRowSelect(event){
    this.selectedData=event.data
}

LIVE DEMO

PrimeNg - Data Table Selection Values with Nested Components

1 Answers1