Select all checkboxes clicking header checkbox inside DataTableModule -PrimeNg

Question

User483994611 posted

I want to implement select all check boxes inside grid clicking header check box.Please help.How to inject the header template checkbox

<p-dataTable [value]="products" [responsive]="true" [rows]="5" [paginator]="true">
 
<p-column field="Id" hidden="hidden"></p-column>
 
<p-column header='' [style]="{'width':'4em'}">
<ng-template let-row="rowData" let-index="rowIndex" let-col pTemplate="body">
<input type="checkbox" [(ngModel)]="row[col.field]"/>

 
</ng-template>
</p-column>
<p-column field="Name" header="Name" sortable="true" [filter]="true" filterPlaceholder="Search"></p-column>
<p-column field="Category" header="Category" sortable="true" [filter]="true" filterPlaceholder="Search"></p-column>
<p-column field="Price" header="Price" sortable="true" [filter]="true" filterPlaceholder="Search"></p-column>
<p-column>
<ng-template let-product="rowData" pTemplate="body">
<button type="button" pButton (click)="editProduct(product)" icon="fa-pencil-square-o"></button>
<button type="button" pButton (click)="deleteProduct(product)" icon="fa-times"></button>
</ng-template>
</p-column>
</p-dataTable>

Answer 1

User288213138 posted

Hi suvo,

According to my search, this question is out of our asp.net support scope.

Your question is related to Java. I suggest you go to Java forums for advice.

Best Regard,
Sam

Answer 2

User483994611 posted

I want to implement the same functionality of the below link in angular4 for  PrimeNg grid

https://www.codeproject.com/Tips/742643/Select-Un-Select-All-checkboxes-in-Gridview-Header

Please help..I think It is a general requirement for all grids

Answer 3

User483994611 posted

I want to implement 

http://www.angulartutorial.net/2017/04/select-all-deselect-all-checkbox.html

this same thing inside Primeng grid

The below code is generating check boxes inside rows of grid but in header column the check box needs to rendered..plz help

<p-column header='Generate HeaderCheckBox' [style]="{'width':'4em'}">
<ng-template let-row="rowData" let-index="rowIndex" let-col pTemplate="body">
<input type="checkbox" [(ngModel)]="row[col.field]"/>
<!-- <p-checkbox filterPlaceholder="false" sortable="false" [filter]="false" binary="true"></p-checkbox> -->
 
</ng-template>
</p-column>

Answer 4

User483994611 posted

I tried to generate the header checkbox by but it not generating the check box rather the text is coming up in screen

<p-column header="{<input type='checkbox' [(ngModel)]='row[col.field]'/>}" [style]="{'width':'4em'}">
<ng-templatelet-row="rowData"let-index="rowIndex"let-colpTemplate="body">
<inputtype="checkbox"[(ngModel)]="row[col.field]"/>
<!-- <p-checkbox filterPlaceholder="false" sortable="false" [filter]="false" binary="true"></p-checkbox> -->
 
</ng-template>
</p-column>

Answer 5

User483994611 posted

I could manage to generate the header checkbox.Please help me to implement the check/uncheck functionality

<p-column [style]="{'width':'4em'}">
<ng-template pTemplate="header">
<input type="checkbox" [(ngModel)]="selectedAll" (change)="selectAll();"/>
</ng-template>

<ng-template let-row="rowData" let-index="rowIndex" let-col pTemplate="body">
<input value="{{row[col.field]}}" type="checkbox" [(ngModel)]="row[col.field]"/>

</ng-template>
</p-column>

Answer 6

User-474980206 posted
As this is a pure angular question, you should try an angular forum like stackoverflow.