Angular Grid Filtering Basics

The Grid filtering feature enables you to display only those Grid records that meet specific filter criteria.

You can enable the filtering feature by using two methods:

• The Data-Binding Directive—Allows you to implement filtering (or other data operations) with less code.
• Manual Filtering—Provides more control when implementing the filtering feature.

Using the Built-in Directive

Тhe kendoGridBinding directive performs filtering automatically. To enable the built-in Grid filtering, set the Grid filterable option to true.

Copy Code<kendo-grid
      [kendoGridBinding]="gridData"
      [filterable]="true"
    >
      <kendo-grid-column field="CompanyName"></kendo-grid-column>
</kendo-grid>

To learn more about the data binding directive and to understand how it works under the hood, see the data operations with the DataBinding directive article.

The following example demonstrates how to enable filtering using kendoGridBinding directive.

Filter Modes

The Grid supports three filtering modes that display different filtering UI.

The following example demonstrates the available filter modes of the Grid.

Filter Data Types

In its column filters, the Grid provides a built-in filtering UI for all basic data types (string, number, Date, boolean). You can set the filtering UI type through the filter input property of each column.

Text Filter

The text filter is the default filter type. Its UI is a TextBox component.

Numeric Filter

The numeric filtering UI is a NumericTextBox component.

Date Filter

The date filtering UI is the DatePicker component.

Boolean Filter

The boolean filtering UI utilizes the DropDownList component.

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