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 event—use it when only filtering is enabled.
   • dataStateChange event—use 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.

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.

Suggested Links

• FilterDescriptors
• dataStateChange
• Built-In Row Filter Templates
• Built-In Menu Filter Templates
• Reusable Custom Filter Components
• Data Binding Basics
• Automatic Data Binding
• API Reference of the GridComponent