I'm utilizing PrimeNG datatables in Angular 2 and I want to know how to make the filter of PrimeNG datatable activate only when the user presses the enter key.
Here is the base code:
HTML:
<div class="container-fluid single-col-full-width-container">
<div class="ui-widget-header ui-helper-clearfix" style="padding:4px 10px;border-bottom: 0 none">
<i class="fa fa-search" style="float:right;margin:4px 4px 0 0"></i>
<input #gb type="text" pInputText size="50" style="float:right" placeholder="Filter...">
</div>
<div class="ContentSideSections Implementation">
<p-dataTable
#reprintGrid
[value]="datasource"
[(selection)]="jobs"
(onRowSelect)="onRowSelect($event)"
[paginator]="true"
[rows]="10"
[responsive]="true"
[totalRecords]="totalRecords"
[lazy]="true"
(onLazyLoad)="getNewDatasource($event)"
[pageLinks]="10"
[rowsPerPageOptions]="[10, 25, 50, 100]"
[globalFilter]="gb"
>
<p-column [style]="{'width':'38px'}" selectionMode="multiple"></p-column>
<p-column *ngFor="let col of columnDefs" [field]="col.field" [header]="col.headerName" [sortable]="true">
</p-column>
</p-dataTable>
</div>
</div>
TS file:
export class ReprintModuleComponent implements OnDestroy, OnInit {
columnDefs = [
{
headerName: 'Athlete',
field: 'athlete'
},
{headerName: 'Age', field: 'age'},
{headerName: 'Country', field: 'country'},
{headerName: 'Year', field: 'year'},
{headerName: 'Date', field: 'date'},
{headerName: 'Sport', field: 'sport'},
{headerName: 'Gold', field: 'gold'},
{headerName: 'Silver', field: 'silver'},
{headerName: 'Bronze', field: 'bronze'},
{headerName: 'Total', field: 'total'}
];
datasource=[];
jobs = [];
totalRecords: number;
pngService: PrimeNgCommonService;
@ViewChild('reprintGrid') reprintGrid;
@ViewChild('gb') globalFilter;
getNewDatasource(event: LazyLoadEvent) {
let obsResponse = this.pjService.sampleData();
obsResponse.subscribe(
res => {
this.datasource = res;
this.totalRecords = res.length;
}
);
}
constructor(private pjService: PrintJobService) {
this.pngService = PrimeNgCommonService.getInstance();
}
onRowSelect(event) {
}
}
Is there a way to customize the filtering behavior of datatables so that it's activated only when the user hits the enter key?