CODEWITHSUNDEEP
primeng-turbotable
Greg-A
Greg-A

Reputation: 862

Turbotable : p-tableHeaderCheckbox selects disabled lines

I am facing a problem on PrimeNG TurboTable.

I started from the following example: https://www.primefaces.org/primeng/#/table/selection and more particularly from the Checkbox Selection example.

The only difference is that on some p-tableCheckbox I added a [disabled]="true"

enter image description here

This works very well if I select a disabled line it does not activate and can not be selected, but when I click on p-tableHeaderCheckbox all the lines are selected even the lines in disabled.

enter image description here

In addition, the selection also counts the lines in status disabled or it should only take lines with no status disabled I made an example on stackblitz : https://stackblitz.com/edit/angular-gnbsml?file=src%2Fapp%2Fapp.component.html

How to prevent tableHeaderCheckbox from also selecting disable lines?

Thank you in advance for your answers

Upvotes: 2

Views: 8900

Answers (3)

Tommy Kao
Tommy Kao

Reputation: 31

just use onRowSelect

html

<p-table (onRowSelect)="isRowSelectable($event)" ....

ts

isRowSelectable(event) {
     return event.data.xxx === true;
}

Upvotes: 0

Vani
Vani

Reputation: 26

It's failing when we have only disabled rows after filter. I have fixed it by checking active rows.

ngAfterViewInit(): void {
    const orig_updateCheckedState = this._headerCheckBox.updateCheckedState;
    const me = this;
    this._headerCheckBox.updateCheckedState = function() {
        const cars: any[] = me._table.filteredValue || me._table.value;
        const selection: any[] = me._table.selection;
        let actRows: boolean = false;
        for (const car of cars) {
            if (!me.isRowDisabled(car)) {
                actRows = true;
                const selected = selection && selection.indexOf(car) >= 0;
                if (!selected) return false;
            }
        }
        if (actRows) {
            return true
        } else {
            return false;
        }
    };
}

Upvotes: 1

alezhu
alezhu

Reputation: 484

You can prevent selection in (selectionChange) callback on table. Split [(selection)] on two part: 

[selection]="selectedRowData" (selectionChange)="onSelectionChange($event)"

Add onSelectionChange method to component:

  onSelectionChange(selection: any[]) {
    for (let i = selection.length - 1; i >= 0; i--) {
      let data = selection[i];
      if (this.isRowDisabled(data)) {
        selection.splice(i, 1);
      }
    }
    this.selectedRowData = selection;
 }

Also add isRowDisabled method:

  isRowDisabled(data: any): boolean {
    return data.color === 'orange'
  }

and change template for tableCheckbox to use isRowDisabled (it's only for check in one place)

<p-tableCheckbox [value]="rowData" [disabled]="isRowDisabled(rowData)"></p-tableCheckbox>

See example on https://stackblitz.com/edit/angular-hnzxs2 (I am also add logic to exclude disabled rows from process of calculating state of headerCheckBox)

Upvotes: 5

Related Questions