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.
The filterBarTemplate feature in the Syncfusion EJ2 TypeScript 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. Injecting Module: Grid features are divided into individual modules. To utilize the filtering feature, inject the Filter module using the Grid.Inject(Filter) method. For more details on configuring filters, refer to the relevant documentation section.