Help - TurboTable with Checkbox (p-checkbox) not working

UI Components for Angular
Post Reply
surfista_litoral
Posts: 4
Joined: 14 Aug 2018, 13:27

15 Aug 2018, 01:18

I have a screen that represents the days of the week that a Company works. There is a TurboTable with columns that have inputs with the day of the week, the opening and closing time, and a checkbox - p-checkbox (marked = "open" / unchecked = "closed"). Make connection rest with the back end and receive a list of objects with the information. The problem occurs when loading the array on the front end, all checkboxes are marked in the TurboTable column without respecting whether it is true or false, but their values (true and false) are displayed correctly, even if I check or uncheck a checkbox. Where am I going wrong? I tried some tests without success. Here's some information:

"primeng": "^5.2.7"
@angular/compiler": "^5.0.0"

html

Code: Select all

<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>
    <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

Code: Select all

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

Code: Select all

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

alex4033
Posts: 8
Joined: 05 Nov 2015, 15:06

15 Aug 2018, 16:24

The same thing happens to me with a project that I am developing, I searched several forums and tried the possible solutions and they did not work. Please, if someone knows the solution, support us with this topic.

surfista_litoral
Posts: 4
Joined: 14 Aug 2018, 13:27

16 Aug 2018, 00:50

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?

surfista_litoral
Posts: 4
Joined: 14 Aug 2018, 13:27

19 Aug 2018, 23:26

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

Code: Select all

<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>

alex4033
Posts: 8
Joined: 05 Nov 2015, 15:06

21 Aug 2018, 15:58

Thank you very much for the solution, it will help me a lot.

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 9 guests