Angular2 - Check-All box is selecting disabled checkbox in ngx data table
Asked on May 28, 2020
Hello,
In ngx-data table I have disabled the checkbox of some rows based on some codition. If I click select all checkbox it is selecting the disabled checkbox also.
How to resolve it, it should not select the disabled checkbox.
Following is my code:
<ngx-datatable #table class='material striped' [columnMode]="'force'" [headerHeight]="50" [footerHeight]="50"
[rowHeight]="'auto'" [limit]="20" [rows]='rows' (sort)="onSort($event)" [selected]="selected" [selectionType]="'checkbox'"
[selectAllRowsOnPage]="true" (select)='onUserSelect($event)' (change)='onCheckboxChangeFn($event)'>
<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-row="row" let-value="value" let-isSelected="isSelected" let-onCheckboxChangeFn="onCheckboxChangeFn">
<input type="checkbox" [checked]="isSelected" (change)="onCheckboxChangeFn($event)" [disabled]="defaultRecord(row)"/>
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="Number" prop="empnumber" class="datatable-header-cell">
<ng-template let-column="column" let-sort="sortFn" ngx-datatable-header-template>
<span (click)="sort()">{{ 'EMPLOYEE.COLUMNS.NUMBER' | translate }}</span>
<br>
<span>
<input type='search' (keyup)='updateFilter($event, column.prop)' class="filterTextEmp" [(ngModel)]="searchValueNumber" />
</span>
</ng-template>
<ng-template let-row="row" ngx-datatable-cell-template>
<a [routerLink]="['/emp-admin/employeesview', row.pk_emp_id]" class="hyperlink"> {{row.empnumber}}</a>
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="Name" prop="displayname" class="datatable-header-cell">
<ng-template let-column="column" let-sort="sortFn" ngx-datatable-header-template>
<span (click)="sort()">{{ 'EMPLOYEE.COLUMNS.NAME' | translate }}</span>
<br>
<span>
<input type='search' (keyup)='updateFilter($event, column.prop)' class="filterTextEmp" [(ngModel)]="searchValueName"/>
</span>
</ng-template>
<ng-template let-row="row" ngx-datatable-cell-template>
{{row.displayname}}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="Email" prop="email" class="datatable-header-cell">
<ng-template let-column="column" let-sort="sortFn" ngx-datatable-header-template>
<span (click)="sort()">{{ 'EMPLOYEE.COLUMNS.EMAIL' | translate }}</span>
<br>
<span>
<input type='search' (keyup)='updateFilter($event, column.prop)' class="filterTextEmp" [(ngModel)]="searchValueEmail"/>
</span>
</ng-template>
<ng-template let-row="row" ngx-datatable-cell-template>
{{row.email}}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="Location" prop="locationname" class="datatable-header-cell">
<ng-template let-column="column" let-sort="sortFn" ngx-datatable-header-template>
<span (click)="sort()">{{ 'EMPLOYEE.COLUMNS.LOCATION' | translate }}</span>
<br>
<span>
<input type='search' (keyup)='updateFilter($event, column.prop)' class="filterTextEmp" [(ngModel)]="searchValueLocation"/>
</span>
</ng-template>
<ng-template let-row="row" ngx-datatable-cell-template>
{{row.locationname}}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="Position" prop="position" class="datatable-header-cell">
<ng-template let-column="column" let-sort="sortFn" ngx-datatable-header-template>
<span (click)="sort()">{{ 'EMPLOYEE.COLUMNS.POSITION' | translate }}</span>
<br>
<span>
<input type='search' (keyup)='updateFilter($event, column.prop)' class="filterTextEmp" [(ngModel)]="searchValuePosition"/>
</span>
</ng-template>
<ng-template let-row="row" ngx-datatable-cell-template>
{{row.position}}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="Action" sortable="false">
<ng-template let-column="column" let-sort="sortFn" ngx-datatable-header-template>
<span>{{ 'EMPLOYEE.COLUMNS.ACTIONS' | translate }}</span>
</ng-template>
<ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
<button matTooltip="Edit {{row.displayname}}" mat-icon-button color="primary" (click)="OnEdit(row)" [disabled]="defaultRecord(row)">
<mat-icon>mode_edit</mat-icon>
</button>
</ng-template>
</ngx-datatable-column>
<ngx-datatable-footer class="datatable-footer">
<ng-template ngx-datatable-footer-template let-rowCount="rowCount" let-pageSize="pageSize" let-curPage="curPage"
let-selectedCount="selectedCount" let-offset="offset" let-isVisible="isVisible">
<datatable-pager class="datatable-pager" [pagerLeftArrowIcon]="'datatable-icon-left'" [pagerRightArrowIcon]="'datatable-icon-right'"
[pagerPreviousIcon]="'datatable-icon-prev'" [pagerNextIcon]="'datatable-icon-skip'" [page]="curPage"
[size]="pageSize" [count]="rowCount" [hidden]="false" (change)="table.onFooterPage($event)">
</datatable-pager>
<div class="page-count">
<span *ngIf="selected">
{{selectedCount}} /
</span>
{{rowCount.toLocaleString()}} {{totalMessage}}
</div>
<div class="datatable-footer-page-limit">
<select placeholder="Items/page" (change)="onLimitChange($event.target.value)" class="page-limit">
<option *ngFor="let option of pageLimitOptions" [value]="option.value" [selected]="option.value == currentPageLimit">
{{option.value}} {{ 'PAGINATION.ITEMS_PER_PAGE' | translate }}
</option>
</select>
</div>
</ng-template>
</ngx-datatable-footer>
</ngx-datatable>
TS file
defaultRecord(row) {
if (row.username === "adminUser") {
this.buttonDisabled = true;
return true;
} else {
this.buttonDisabled = false;
return false;
}
}
Please provide me the solution.
Replied on May 28, 2020
You can achieve using same logic as you disable the checkbox.
For [checked]="isSelected"
Create a method and return true/false conditionally.
isSelected(row) {
if (row.username === "adminUser") {
return true;
} else {
return false;
}
}
Then use the method
[checked]="isSelected(row)"
Replied on May 28, 2020
Thank you Mukesh for the solution.
I have done the changes as you suggested.
But I am getting following error:
ERROR TypeError: _v.context.isSelected is not a function
