How do I trigger only on key enter in filter of primeNG datatables angular 2

Question

I am using PrimeNG datatables angular 2. How do I only trigger the filter of primeNG datatable when the enter key is pressed?

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) {
    //in a real application, make a remote request to load data using state metadata from event
    //event.first = First row offset
    //event.rows = Number of rows per page
    //event.sortField = Field name to sort with
    //event.sortOrder = Sort order as number, 1 for asc and -1 for dec
    //filters: FilterMetadata object having field as key and filter value, filter matchMode as value

    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) {

  }
}

How do I override the filtering of datatables to only trigger on key enter pressed?

Much easier to help if you provide the code you have where you tried this, and explain what didn't work, or any errors you received — Ruan Mendes, Oct 14 '16 at 00:36
uuhh? no need for code. that's exactly the problem. I do not know how to only trigger the filtering on key enter pressed. But I can give you the base code. i'll update my post — kimondoe, Oct 14 '16 at 00:43

score 2 · Answer 1 · edited May 23 '17 at 12:25

Officially that's not posible... but I could do this by manipulating the filterDelay attribute and using the key event feature of Angular 2 , I'll write a general version of how to do this.

TS file

import {DataTable} from "primeng/components/datatable/datatable";

@Component({
    templateUrl: '.../some.component.html'
})

export class SomeComponent implements OnInit {
    @ViewChild(('myDT')) dataTableX: DataTable;

    constructor() {}

    ngOnInit() {
        // I used this number by (1)
        this.dataTableX.filterDelay = 2147483647;
    }

    filter(){
        this.dataTableX.filterDelay = -1;
    }

    reset(){
        this.dataTableX.filterDelay = 2147483647;
    }
}

HTML file

<p-dataTable #myDT (keydown.enter)="filter()" (keyup.enter)="reset()" >
    <p-column field="fieldx" header="Column name" [filter]="true"></p-column>
</p-dataTable>

I tested using:

Primeng 1.0.0-beta.17
Angular 2.0.0 Final release

(1)The number of delay for automatic filter is approximately 24 days. Cannot use Infinity, Number.MAX_VALUE or Number.MAX_SAFE_INTEGER because the browsers use 32 bits int.

I hope this is helpful.

How do I trigger only on key enter in filter of primeNG datatables angular 2

1 Answers1