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:

• The array to be filtered.
• The filters to be applied, passed as a CompositeFilterDescriptor object.

Copy Codepublic 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.

Suggested Links

• Filter Component Overview
• API Reference of the Filter Component
• Overview of Filtering