Asked by:
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>Thursday, July 18, 2019 3:20 PM
All replies
-
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,
SamFriday, July 19, 2019 5:36 AM -
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
Friday, July 19, 2019 7:04 AM -
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>Friday, July 19, 2019 7:21 AM -
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>Friday, July 19, 2019 7:44 AM -
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>Friday, July 19, 2019 3:57 PM -
User-474980206 posted
As this is a pure angular question, you should try an angular forum like stackoverflow.Sunday, July 21, 2019 6:05 PM