Example of Filter Bar Template in ASP.NET Core Data Grid Control

This sample illustrates the Grid's filtering bar feature, utilizing custom components in the filter cells through the filterBarTemplate feature. This functionality allows users to filter records based on specified criteria, displaying a reduced set of data. To enable filtering, set the allowFiltering property to true, which renders a filter bar row next to the header. Users can then filter data by entering text into the cells of this row.

DEMO

SOURCE

The filterBarTemplate feature in the ASP.NET Core Data Grid allows customization of the controls in the filter bar. By default, a text box appears in the filter bar cell. In this demo, the Grid showcases various custom input components: a custom input component for the ID, Name and Price columns, and a Syncfusion DropDownList for the Discontinued column, all achieved through the filter bar template feature. You can customize the filter components in the filter cells by setting the filterBarTemplate property for each column. The Unit Stock column uses the default filter bar cell with operator functionality.

For more details on configuring filters, refer to the relevant documentation section .