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

Angular Grid Manual Filtering

Updated on Aug 19, 2026

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 Angular Grid events manually. The manual filtering is especially useful when you require additional customization of the filtering logic.

To implement manual filtering:

Set the filterable option.
Bind the filter option to a CompositeFilterDescriptor object.
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. For more details, check the section 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 and use the process() method. 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.

Loading ...

Server-Side Filtering

To filter data on the server, send the descriptor that the Grid provides to your data service. Handle filterChange when filtering is the only enabled data operation. Handle dataStateChange when filtering is combined with paging, sorting, or grouping.

The backend must apply the received filter descriptor and any other requested data operations to the data source. Return a GridDataResult that contains the filtered data and the total number of matching records. The Grid uses the total count to render the pager correctly.

To process the data on the server:

Convert the Grid State to a request string with toDataSourceRequestString, and send it to the data service.

public fetch(state: State): Observable<GridDataResult> {
    const request = toDataSourceRequestString(state);

    return this.http.post<GridDataResult>(this.baseUrl, request, {
        headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' }
    });
}

Bind the request to DataSourceRequest and pass it to ToDataSourceResult. Import Kendo.Mvc.Extensions and Kendo.Mvc.UI to use these APIs.
C#
```
[AcceptVerbs("Get", "Post")]
public IActionResult Get([DataSourceRequest] DataSourceRequest request)
{
    return Json(this.context.Customers.ToDataSourceResult(request));
}
```
To use ToDataSourceResult, install the Telerik ASP.NET MVC UI NuGet package source. Follow Installing Telerik UI for ASP.NET MVC Using NuGet Packages or the .NET CLI installation guide.
Return the processed records and their total count as the JSON response. For a production data source, apply ToDataSourceResult directly to the data query, as shown by the CustomersController.

The following example runs this flow against the demos service, using the ServerOperationsController. Review the GraphQL ASP.NET Core demos service for the complete server implementation.

Loading ...

For a runnable local example and setup guidance for server-side data operations in ASP.NET Core with the Grid and Upload components, see Kendo UI for Angular Integration with ASP.NET Core. For Java Spring Boot data operations, see Kendo UI for Angular Java Spring Boot Integration.

Angular Grid Manual Filtering

Filtering Local Data

Server-Side Filtering

Suggested Links