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

Angular Data Grid Searching

Updated on Feb 6, 2026

The Grid provides built-in searching functionality that allows users to filter data across multiple columns with keyword-based queries. The AI Smart Box Search mode enables this feature through a unified toolbar control that generates filter expressions as users type, matching the search value against specified fields.

You can configure the search feature by using two methods:

Automatic Data Processing—Allows you to implement searching with less code.
Manual Searching—Provides more control when implementing the searching feature.

The following example demonstrates the Search mode with automatic data processing:

Change Theme

Theme

Loading ...

Automatic Data Processing

When you use the built-in kendoGridBinding directive to implement data binding in the Grid, the AI Smart Box automatically applies the search filters.

To configure automatic search in the Grid, add the <kendo-grid-smartbox-tool> to your Grid toolbar and enable the searchMode property:

HTML

<kendo-grid [kendoGridBinding]="products">
    <kendo-toolbar>
        <kendo-grid-smartbox-tool
            [searchMode]="true">
        </kendo-grid-smartbox-tool>
    </kendo-toolbar>
</kendo-grid>

When using automatic data processing, the AI Smart Box automatically creates filter expressions for the specified search fields and uses the contains operator to match partial text. For example, a search for "laptop" in fields productName and category generates:

typescript

{
    logic: 'or',
    filters: [
        { field: 'productName', operator: 'contains', value: 'laptop' },
        { field: 'category', operator: 'contains', value: 'laptop' }
    ]
}

Manual Searching

For scenarios where you need more control over the search behavior, you can handle the search event to implement custom search logic in the AI Smart Box tool:

HTML
<kendo-grid>
    <kendo-toolbar>
        <kendo-grid-smartbox-tool
            [searchMode]="searchSettings"
            (search)="onSearch($event)">
        </kendo-grid-smartbox-tool>
    </kendo-toolbar>
</kendo-grid>
TypeScript
public searchSettings: GridSmartBoxSearchSettings = {
    enabled: true,
    fields: ['productName', 'category', 'supplier']
};

public onSearch(event: GridSmartBoxSearchEvent): void {
    const filters: FilterDescriptor[] = this.searchSettings.fields.map(field => ({
        field: field,
        operator: 'contains',
        value: event.searchValue
    }));

    const filter: CompositeFilterDescriptor = {
        logic: 'or',
        filters: filters
    };

    this.gridView = filterBy(this.products, filter);
}

Manual searching allows you to customize which filter operators are applied, transform the search value before filtering, or combine the search with other filtering criteria.

Configuration Options

The Search mode provides the following configuration options to customize its behavior through the GridSmartBoxSearchSettings object:

Search Fields—Define which columns are included in the search.
Typing Delay—Set the debounce time before triggering the search.
Placeholder Text—Provide guidance text in the search input field.
Query History—Enable users to access and reuse previous search queries.

Search Fields

The Search mode settings provide a fields property that allows you to specify which columns participate in the search. If not specified, the AI Smart Box searches across all Grid columns that have a defined field property.

typescript

public searchSettings: GridSmartBoxSearchSettings = {
    enabled: true,
    fields: ['productName', 'category', 'supplier']
};

Typing Delay

You can use the delay property to control how long the AI Smart Box waits after the user stops typing before triggering the search. The default value is 300 milliseconds.

typescript

public searchSettings: GridSmartBoxSearchSettings = {
    enabled: true,
    delay: 400  // Wait 400ms after user stops typing
};

Placeholder Text

The placeholder property allows you to customize the placeholder text that guides users about what they can search for.

typescript

public searchSettings: GridSmartBoxSearchSettings = {
    enabled: true,
    placeholder: 'Search by name, category, or supplier...'
};

Query History

The history property configures query history options specifically for Search mode, allowing users to access and reuse previous searches. The default history size is 5 queries, and the default timestamp format is 'HH:mm:ss'.

typescript

public searchSettings: GridSmartBoxSearchSettings = {
    enabled: true,
    history: {
        size: 5,  // Keep last 5 searches
        timestampFormat: 'h:mm a'  // Show time in 12-hour format
    }
};