Filtering the Grid on Enter/Return Key Press

Environment

Product

Progress® Kendo UI® for Angular Grid

Description

The Kendo UI for Angular Grid automatically triggers the built-in filtering functionality on user input when I am using the row configuration. How can I filter the Grid component when the user presses the Enter/Return keyboard key?

Solution

To filter the Grid by a string value on an Enter/Return key press:

1. Create a custom Kendo UI for Angular TextBox filtering component by following the steps in the Custom Filters article.

2. Handle the built-in valueChange event of the TextBox and store the filtering value in a designated variable.

ts

public filterValue: string = '';

public onValueChange(value: string): void {
    this.filterValue = value;
}

3. Handle the generic Enter keydown event and apply the desired filtering.

html

<kendo-textbox ... (keydown.enter)="onEnter()"></kendo-textbox>

ts

public onEnter() {
    this.applyFilter(
      this.filterValue === null
        ? this.removeFilter(this.field)
        : this.updateFilter({
            field: this.field,
            operator: 'contains',
            value: this.filterValue,
          } as FilterDescriptor)
    );
  }

The following example demonstrates the full implementation of the suggested approach.

Change Theme

Theme

Loading ...

See Also

• Grid Overview
• API Reference of the Grid Component
• API Reference of the TextBox Component
• Grid Filtering