locked
Select all checkboxes clicking header checkbox inside DataTableModule -PrimeNg RRS feed

  • 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,
    Sam

    Friday, 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