How To Create Customized Bulk Checkbox
Posted By : Nutan Verma | 28-Apr-2020
Here we are creating our bulk checkbox in primeng table its functionality is same, which we can notice in gmail bulk checkbox. So here is the code with some preselected checkboxes
<p-table [value]="payrollDataList">
<ng-template pTemplate="header">
<tr>
<th>Vin</th>
<th>Year</th>
<th>Brand</th>
<!-- This will be the header of our checkbox -->
<th><input type="checkbox" class="regular-checkbox" id ="selectAll" (change)="toggleCheckAll($event);"></th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-car>
<tr>
<td>{{car.vin}}</td>
<td>{{car.year}}</td>
<td>{{car.brand}}</td>
<td>{{car.color}}</td>
<!-- This will be the checkbox in perticular rows -->
<td><input type="checkbox" [checked]="rowData.isProcessed" class="regular-checkbox" (change)="selectSingleCheck($event, rowData);"></td>
</tr>
</ng-template>
</p-table>
So above we wrote two functions for checkbox one function in header for selecting and unselecting all rows and another function for selecting or unselection single row
here in checked binding we have wrote rowData.isProcessed so whenever this value will be true in our data then we will get our default checked boxes in that perticular rows
Below is the code in our typescript file , where we have triggered the functions in header and in perticular rows.
//header function
toggleCheckAll(event) {
if(event.target.checked) // if we get true value from header
{this.selectedDataIds = this.payrollDataList.map(data => data.payrollId);}
else
{ this.selectedDataIds=[] }
let payrollData = this.payrollDataList.map(data => {
return { ...data, isProcessed: event.target.checked }
});
this.payrollDataList = payrollData;
}
//checkbox for perticular rows
selectSingleCheck(event, rowData) {
if(event.target.checked)
{
if(!this.selectedDataIds.includes(rowData.payrollId))
this.selectedDataIds.push(rowData.payrollId)
}
else
var index = this.selectedDataIds.indexOf(rowData.payrollId);
if (index > -1) {
this.selectedDataIds.splice(index, 1);
}
//if perticular rows checked is lesser than all rows then unselect the header checkbox
if(this.selectedDataIds.length<this.payrollDataList.length)
{
if(document.getElementById("selectAll")["checked"]){
document.getElementById("selectAll")["checked"]=false
}
}
//if perticular rows checked is lesser equal to all rows then checked the header checkbox
if(this.selectedDataIds.length == this.payrollDataList.length)
{
document.getElementById("selectAll")["checked"]=true
}
let user = this.payrollDataList.filter(data => data.userId === rowData.userId);
}
so here toggleCheckAll function written in the header of the table will select all the rows ids and selectSingleCheck for selecting single row id
here checked or unchecked value will always depend on key processed if true then the checkbox will be selected, if false than checkbox will be unselected
we can also do more modifications in this customized checkbox, for example, if we want to disable some of the checkboxes, that we can do by using property binding disabled and in this, we can write the particular condition in it for which we want to enable or disable the checkboxes.
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Nutan Verma
She works as a Frontend Developer. She keeps looking for challenges which demands the best of her professional ability in terms of technical, analytical skills. She is always energetic and competent.