Ngx-datatable: how to disable the checkbox based on condition ?

[ghost]

I am using below example
https://github.com/swimlane/ngx-datatable/blob/master/demo/selection/selection-chkbox-template.component.ts

in this, I want to control my checkbox like disable or enable, based on my row condition. can someone tell me how can i do it ??

[lucabrasi83]

Hi,

It depends what's your condition I guess, but in my case I control in ngx-datatable whether the checkbox should be enabled or not as below using the [checked] property.

The condition is simply the checkbox is checked only if the selected row index equals to ngx-datatable rowIndex.

 <ngx-datatable-column
      [canAutoResize]="false"
      [sortable]="false" name="" [width]="70">

 <ng-template ngx-datatable-cell-template let-value="value" 
let-isSelected="isSelected"
let-onCheckboxChangeFn="onCheckboxChangeFn" 
let-row="row" let-rowIndex="rowIndex">


      <mat-checkbox [checked]="index === rowIndex"
                    (change)="onSelect($event, row)"
                    [value]="row">
      </mat-checkbox>

    </ng-template>
    </ngx-datatable-column>`

index: boolean;

onSelect($event, row) {
    if ($event.source.checked) {
      this.index = this.rows.indexOf(row);
}

Hope this helps.

[ghost]

In my case, I want to disable or hide the checkbox from my data.
<ngx-datatable-column [width]="30" [sortable]="false" [canAutoResize]="false" [draggable]="false" [resizeable]="false"> <ng-template ngx-datatable-header-template let-value="value" let-allRowsSelected="allRowsSelected" let-selectFn="selectFn"> <input type="checkbox" [checked]="allRowsSelected" (change)="selectFn(!allRowsSelected)"/> </ng-template> <ng-template ngx-datatable-cell-template let-value="value" let-isSelected="isSelected" let-onCheckboxChangeFn="onCheckboxChangeFn" > <input type="checkbox" [checked]="isSelected" (change)="onCheckboxChangeFn($event)" /> </ng-template> </ngx-datatable-column>

in the above template I am unable to get my data instance, could you please let me know how I can do it.
thanks in advance

[mathvbarone]

I'm with the same problem.

[utkarsh-srivastava]

In the input property we can use the disabling condition in the attribute
[disabled]="true"

[niraj-ui]

In the input property we can use the disabling condition in the attribute
[disabled]="true"

Hi Utkarsh,

Your solution is good but when selecting all select option on click, it checked all options(which are disabled too). How to manage only enabled checkbox will check?

[ankitsalu]

did you get any answer? i am also searching for the same

[niraj-ui]

did you get any answer? i am also searching for the same

No.. i also wait for answer

[ankitsalu]

did you get any answer? i am also searching for the same

No.. i also wait for answer

I figured out how we can do, and its working now for me:

now at the header level, give custom function name i.e. selectCheckboxheader()








In typescript, add that function. Also now you can put any condition of your choice to select only those rows which you want to show selected on UI, and push those rows in selectedRows
selectedAll = false;
selectCheckboxheader() {
// this flag will help you to know whether the checkbox is on or off
this.selectedAll = !this.selectedAll;

//if checkbox is off then deselect everything
if (this.selectedAll === false) {
this.selectedRows = [];
} else {

    this.AllRows.forEach(x => { // loop through all the rows and put condition
        if (x.price > 35.52) { // that's your condition based on which you deciding which rows to highlight
            this.selectedRows.push(x);
        }
    });
}

// after above, do the below which will just refresh the ngx datatable to show selected rows
this.AllRows = [...this.AllRows];
}

Hope this would help!