Angular & ng2-smart-table: Multi selectmode checkbox disable - css

Question

I'm using ng2-smart-table to display some data, i've set the selectMode to 'multi' in order to have checkboxes on the left side. In the data i have an array of objects which come with a property "set" which is a boolean and can either be true or false, how do i disable the checkbox if the set property is true? Is there a way to do this?
I've already tried making a new renderComponent etc but then i lose the selectAll functionality plus with a renderComponent the selectRow works different.
Here's a link: https://stackblitz.com/edit/angular-ndmxxg

Answer 1

I have put a button on the Top, which is initialized to true, when you press it, it will disable all the checkboxes;
NOTE: I have set this on click of a button so that you see it in action; If you want to do it after getting a boolean variable from the parent or by-default, you'd have to do this inside ngAfterViewInit()... since we'd have to wait for the ng2-smart-table to be rendered and ready; i left a comment in my stackblitz about it also;
relevant HTML:
<h3>
Event Response in Console
</h3>
<button (click)="onClick()"> Disable checkbox </button>
<hr/>
<ng2-smart-table [settings]="settings" [source]="data" (deleteConfirm)="onDeleteConfirm($event)" (editConfirm)="onSaveConfirm($event)"
(createConfirm)="onCreateConfirm($event)" (userRowSelect)="onRowSelect($event)">
relevant TS:
import { Component, Renderer2, ElementRef, ViewChild } from '#angular/core';
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
selectedMode: boolean = true;
// This will contain selected rows
selectedRows: any;
constructor(private renderer2: Renderer2, private e: ElementRef) { }
ngAfterViewInit() { }
disableCheckboxes() {
var checkbox = this.e.nativeElement.querySelectorAll('input[type=checkbox]');
checkbox.forEach((element, index) => {
/* disable the select all checkbox */
if (index ==0){this.renderer2.setAttribute(element, "disabled", "true");}
/* disable the checkbox if set column is false */
if (index >0 && this.data[index-1].set == false) {
this.renderer2.setAttribute(element, "disabled", "true");
}
});
}
settings = {
selectMode: 'multi',
delete: {
confirmDelete: true,
deleteButtonContent: 'Delete data',
saveButtonContent: 'save',
cancelButtonContent: 'cancel'
},
add: {
confirmCreate: true,
},
edit: {
confirmSave: true,
},
columns: {
id: { title: 'ID', },
name: { title: 'Full Name', },
email: { title: 'Email', },
set: { title: 'Set', }
},
};
data = [
{
id: 1,
name: "Leanne Graham",
email: "Sincere#april.biz",
set: true
},
{
id: 2,
name: "Ervin Howell",
email: "Shanna#melissa.tv",
set: false
},
// ... list of items
{
id: 11,
name: "Nicholas DuBuque",
email: "Rey.Padberg#rosamond.biz",
set: false
}
];
// UserRowSelected Event handler
onRowSelect(event) {
this.selectedRows = event.selected;
}
// Get Selected button click handler
onClick() {
// It will console all the selected rows
this.selectedMode = false;
this.disableCheckboxes();
}
onDeleteConfirm(event) {
console.log("Delete Event In Console")
console.log(event);
if (window.confirm('Are you sure you want to delete?')) {
event.confirm.resolve();
} else {
event.confirm.reject();
}
}
onCreateConfirm(event) {
console.log("Create Event In Console")
console.log(event);
}
onSaveConfirm(event) {
console.log("Edit Event In Console")
console.log(event);
}
}
complete working stackblitz here
Update (in light of questioner's comment below):
relevant CSS:
::ng-deep table tr td:nth-of-type(1),
::ng-deep table tr th:nth-of-type(1)
{ padding:0 !important; display: block;height: 13px; position: relative;}
::ng-deep table tr td:nth-of-type(1) input,
::ng-deep table tr th:nth-of-type(1) input
{ margin:0 !important; position: absolute; top: 15px;}
::ng-deep table tr td:nth-of-type(2),
::ng-deep table tr th:nth-of-type(2)
{ padding: 0 0 0 20px !important;}