CODEWITHSUNDEEP
angularprimeng
Samet Dağ
Samet Dağ

Reputation: 167

single selection not working for checkbox in p-table

My table selectionmode set to single but singlemode not working with p-tableCheckbox as expected like radiobutton's single selection. If i have checkboxes i can only use multi select but i wanna use single selection mode. How to achieve that with my code.Thanks in advance

my html :

<p-table #dt [value]="customers" selectionMode="single" dataKey="id" [(selection)]="selectedRecord" styleClass="ui-table-customers" [rowHover]="true" [rows]="10" [showCurrentPageReport]="true" [rowsPerPageOptions]="[10,25,50]" [loading]="loading" [paginator]="true"
currentPageReportTemplate="{first}" [filterDelay]="0"
[globalFilterFields]="['name','date','status']">
<ng-template pTemplate="header">
    <tr>
        <th></th>
        <th pSortableColumn="name">{{'isim' | translate}}
          <p-sortIcon field="name"></p-sortIcon>
        </th>
    </tr>
    <tr>
        <th></th>
        <th>
            <input pInputText type="text" (input)="dt.filter($event.target.value, 'name', 'startsWith')" [placeholder]="'isimilearama' | translate" class="ui-column-filter">
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-customer>
        <tr class="ui-selectable-row">
            <td>
                <p-tableCheckbox [value]="customer"></p-tableCheckbox>
            </td>
            <td>
                <span class="ui-column-title">name</span> {{customer.name}}
            </td>
        </tr>
    </ng-template>
</p-table>

my ts file :

import { Component, OnInit, ViewChild } from '@angular/core';
import { Table } from 'primeng/table/table';
import { TranslatePipe } from 'src/app/pipelar/translate.pipe';

@Component({
  selector: 'app-gorevler',
  templateUrl: './gorevler.component.html',
  styleUrls: ['./gorevler.component.scss']
})
export class GorevlerComponent implements OnInit {

  customers: Customer[];
  loading: boolean = true;
  @ViewChild('dt') table: Table;
  exportColumns: any[];
  selectedRecord: any;

  constructor() {
  }

  ngOnInit(): void {
    this.customers = [
      { id: 1, name: "samet", date: new Date().toLocaleString(), status: "new" },
      { id: 2, name: "busra", date: new Date().toLocaleString(), status: "new" },
      { id: 3, name: "aslı", date: new Date().toLocaleString(), status: "new" },
      { id: 4, name: "pelin", date: new Date().toLocaleString(), status: "done" },
      { id: 5, name: "ceyda", date: new Date().toLocaleString(), status: "done" }
    ];
    this.loading = false;
    console.log(this.selectedRecord);
  }
}

interface Customer {
  id?: number;
  name: string;
  date?: string;
  status?: string;
}

Upvotes: 2

Views: 8996

Answers (1)

Cagri Tacyildiz
Cagri Tacyildiz

Reputation: 17610

as a way you can add ngModel with same param to each checkbox then give change event each them demo

<p-checkbox(onChange)="onChange()"[(ngModel)]="choosenCustomer" name="group" [value]="customer"></p-checkbox>

then

onChange() {
    const choosen= this.choosenCustomer[this.choosenCustomer.length - 1];   
    this.choosenCustomer.length = 0;
    this.choosenCustomer.push(choosen);
  }

Upvotes: 1

Related Questions