TurboTable with p-checkbox not working - PrimeNG

Question

I developed a screen that has a TurboTable and one of the columns is checkbox. I made the TurboTable configuration as specified in the documentation but all checkboxes return marked when loading the data or do not appear at first, but if you click on the line the checkbox is displayed. Someone to instruct me to make when loading the data from the backend the checkboxes are loaded with the values marked or not, depending on the data loaded. Here are some facts:

Html

<p-table [value]="dias" [responsive]="true">
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th class="col-codigo" scope="col">Aberto?</th>
            <th class="col-codigo" scope="col">Código</th>
            <th scope="col">Dia Semana</th>
            <th scope="col">Hora Abertura</th>
            <th scope="col">Hora Fechamento</th>
        </tr>
    </ng-template>

<!--    ## TODO: TEST
<p-cellEditor>
                    <ng-template pTemplate="input">
                      <p-checkbox [(ngModel)]="dia.opt_Funcionamento"
                        [binary]="true" name="funcionamento" (onclick)="!dia.opt_Funcionamento"
                        [value]="dia.opt_Funcionamento"></p-checkbox>
                    </ng-template>
                    <ng-template pTemplate="output">
                        <p-checkbox [binary]="true" [value]="dia.opt_Funcionamento" [(ngModel)]="dia.opt_Funcionamento"
                        name="funcionamentoDia"></p-checkbox>
                    </ng-template>
                </p-cellEditor>
        -->


    <ng-template pTemplate="body" let-dia>
        <tr>
            <td>
                  <p-checkbox [(ngModel)]="dia.opt_Funcionamento" [value]="dia.opt_Funcionamento"
                    binary="false" name="funcionamento" (onclick)="!dia.opt_Funcionamento"></p-checkbox>
                    </td>
          <td scope="row">
            {{dia.cd_Funcionamento}}
          </td>
          <td scope="row">
            {{dia.dia}}
          </td>
          <td pEditableColumn scope="row">
              <p-cellEditor>
                  <ng-template pTemplate="input">
                      <p-calendar [(ngModel)]="dia.hr_Abertura" [timeOnly]="true" name="horaAbertura" [showSeconds]="true" dataType="string"></p-calendar>
                  </ng-template>
                  <ng-template pTemplate="output">
                      {{dia.hr_Abertura}}
                  </ng-template>
              </p-cellEditor>
          </td>
          <td pEditableColumn scope="row">
              <p-cellEditor>
                  <ng-template pTemplate="input">
                      <p-calendar [(ngModel)]="dia.hr_Fechamento" [timeOnly]="true" name="horaFechamento" [showSeconds]="true" dataType="string"></p-calendar>
                  </ng-template>
                  <ng-template pTemplate="output">
                      {{dia.hr_Fechamento}}
                  </ng-template>
              </p-cellEditor>
          </td>
      </tr>
    </ng-template>
  </p-table>

Component.ts

export class FuncionamentoEstabelecimentoCadastroComponent {
  @Input () displayValue: string;
  funcionamentoEstabelecimento = new FuncionamentoEstabelecimento();
  dias: FuncionamentoEstabelecimento[];
  aberto = false; //TEST
  diaSelecionado: FuncionamentoEstabelecimento; //TEST

  constructor(
    ...
  ) { }

  ngOnInit() {
    this.tituloPagina.setTitle('Dias de funcionamento do estabelecimento');
    const codigoFuncionamento = this.rota.snapshot.params['codigo'];
    this.carregaDiasFuncionamento();
}

carregaDiasFuncionamento() {
    this.funcionamentoService.carregaDiasFuncionamento()
      .then(funcionamentoDados => {
        this.dias = funcionamentoDados;
      })
      .catch(erro => this.errorHandler.handle(erro));
  }

Model

export class FuncionamentoEstabelecimento {
  cd_Funcionamento: number;
  dia: string;
  opt_Funcionamento = false;
  hr_Abertura: Time;
  hr_Fechamento: Time;

}

EDIT:

I was able to solve the problem. I used "span" for the solution. Follow:

<td style="text-align: center" scope="row">
            <span *ngIf="rowData.opt_Funcionamento">
                <p-selectButton [options]="aberto" [(ngModel)]="rowData.opt_Funcionamento"
                  (onOptionClick)="!rowData.opt_Funcionamento" name="diaAberto"
                  pTooltip="Aberto" tooltipPosition="top"></p-selectButton>
            </span>
            <span *ngIf="!rowData.opt_Funcionamento">
                <p-selectButton [options]="aberto" [(ngModel)]="rowData.opt_Funcionamento"
                (onOptionClick)="rowData.opt_Funcionamento" name="diaFechado"
                pTooltip="Fechado" tooltipPosition="top"></p-selectButton>
            </span> </td>

After testing I checked that the column is with the values corresponding to the last record of TurboTable ... if the last record is true, all come as true, if it is false all will be however the values of the check boxes are correct. I still do not know why they are being marked according to TurboTable's last checkbox. Anyone have ideas? — Michel

Taoufik Yagoubi Taoufik Yagoubi · Accepted Answer · 2019-03-18T09:50:33

You must have the different names between checkboxes, otherwise it will not work.

TypeScript:

concatName(name: string, id: string) {   
    return name.concat(StringUtils.DASH).concat(id);
}

HTML:

<p-checkbox  [name]="concatName('validationRadiation',authorisation.id)">

TurboTable with p-checkbox not working - PrimeNG

1 Answers