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

Angular Grid Manual Filtering

The manual filtering gives the developer full control over the filtering of the data. Compared to the filtering with the built-in directive, the manual approach provides greater transparency of the filtering process because it requires you to handle the Grid events manually. The manual filtering is especially useful when you require additional customization of the filtering logic.

To implement manual filtering:

  1. Set the filterable option.
  2. Bind the filter option to a CompositeFilterDescriptor object.
  3. To filter local data or send a remote service request, handle either of the following events:
    • filterChange eventuse it when only filtering is enabled.
    • dataStateChange eventuse it when more than one data operation is enabled. Check the Data Operations article for more details on how to handle multiple data operations.

Filtering Local Data

To filter the data, use the built-in filterBy() or process() functions.

When you enable multiple data operations, handle the dataStateChange event instead of the filterChange event. Further details on how to manually process the data with multiple data operations enabled are available in the section on handling multiple data operations. The following example demonstrates this approach.

Example
View Source
Change Theme:

Server-Side Filtering

Handle the filterChange or dataStateChange event to send a request containing information about the current Grid state to the server. See the section on handling multiple data operations using remote data for an example.