New to Kendo UI for Angular? Start a free 30-day trial

Angular Grid External Filtering

The Grid allows you to filter its data externally. When using this approach, you can omit setting the built-in filterable option of the Grid, which defaults to false.

In order to filter the data, use the filterBy method from the kendo-data-query utility package. It accepts two parameters:

public applyFilter(filter: CompositeFilterDescriptor): void {
    this.gridData = filterBy(sampleProducts, filter);
    // ...

Using the Filter Component

The Filter component has an UI that is especially suitable for external filtering. It allows the user to enter the desired filter and constructs the ready-to-use CompositeFilterDescriptor filter expression as a value.

The following example demonstrates how to implement external filtering using the Filter component. For the purposes of the demo, the Filter component is placed inside a Window component.

View Source
Change Theme:

In this article

Not finding the help you need?