# Angular Data Grid Searching The Grid provides built-in searching functionality that allows users to filter data across multiple columns with keyword-based queries. The [AI Smart Box](https://www.telerik.com/kendo-angular-ui-develop/components/grid/smart-grid/ai-toolbar-tool) 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](https://www.telerik.com/kendo-angular-ui-develop/components/grid/searching#automatic-data-processing)—Allows you to implement searching with less code. * [Manual Searching](https://www.telerik.com/kendo-angular-ui-develop/components/grid/searching#manual-searching)—Provides more control when implementing the searching feature. The following example demonstrates the Search mode with automatic data processing: [Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/grid/searching/source.txt) ## Automatic Data Processing When you use the built-in [`kendoGridBinding`](https://www.telerik.com/kendo-angular-ui-develop/components/grid/api/databindingdirective) 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 [``](https://www.telerik.com/kendo-angular-ui-develop/components/grid/api/smartboxtoolbartoolcomponent) to your Grid toolbar and enable the [`searchMode`](https://www.telerik.com/kendo-angular-ui-develop/components/grid/api/smartboxtoolbartoolcomponent#searchmode) property: ```HTML ``` When using automatic data processing, the AI Smart Box automatically creates filter expressions for the specified [search fields](https://www.telerik.com/kendo-angular-ui-develop/components/grid/searching#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`](https://www.telerik.com/kendo-angular-ui-develop/components/grid/api/smartboxtoolbartoolcomponent#search) event to implement custom search logic in the AI Smart Box tool: ```HTML ``` ```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`](https://www.telerik.com/kendo-angular-ui-develop/components/grid/api/gridsmartboxsearchsettings) object: * [Search Fields](https://www.telerik.com/kendo-angular-ui-develop/components/grid/searching#search-fields)—Define which columns are included in the search. * [Typing Delay](https://www.telerik.com/kendo-angular-ui-develop/components/grid/searching#typing-delay)—Set the debounce time before triggering the search. * [Placeholder Text](https://www.telerik.com/kendo-angular-ui-develop/components/grid/searching#placeholder-text)—Provide guidance text in the search input field. * [Query History](https://www.telerik.com/kendo-angular-ui-develop/components/grid/searching#query-history)—Enable users to access and reuse previous search queries. ### Search Fields The Search mode settings provide a [`fields`](https://www.telerik.com/kendo-angular-ui-develop/components/grid/api/gridsmartboxsearchsettings#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`](https://www.telerik.com/kendo-angular-ui-develop/components/grid/api/columncomponent#field) property. ```typescript public searchSettings: GridSmartBoxSearchSettings = { enabled: true, fields: ['productName', 'category', 'supplier'] }; ``` ### Typing Delay You can use the [`delay`](https://www.telerik.com/kendo-angular-ui-develop/components/grid/api/gridsmartboxsearchsettings#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`](https://www.telerik.com/kendo-angular-ui-develop/components/grid/api/gridsmartboxsearchsettings#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`](https://www.telerik.com/kendo-angular-ui-develop/components/grid/api/gridsmartboxsearchsettings#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 } }; ``` ## Suggested Links * [AI Smart Box](https://www.telerik.com/kendo-angular-ui-develop/components/grid/smart-grid/ai-toolbar-tool) * [Semantic Search Mode](https://www.telerik.com/kendo-angular-ui-develop/components/grid/smart-grid/semantic-search) * [AI Assistant Tools Setup](https://www.telerik.com/kendo-angular-ui-develop/components/grid/smart-grid/ai-assistant-tools-setup) * [Smart Grid Overview](https://www.telerik.com/kendo-angular-ui-develop/components/grid/smart-grid) * [Angular Grid Configuring the ToolBar](https://www.telerik.com/kendo-angular-ui-develop/components/grid/toolbar/grid-toolbar) * [Grid Data Operations](https://www.telerik.com/kendo-angular-ui-develop/components/grid/data-operations) * [API Reference of the GridSmartBoxToolComponent](https://www.telerik.com/kendo-angular-ui-develop/components/grid/api/smartboxtoolbartoolcomponent)