# Angular Data Grid AI Row Highlight

The [Angular Grid](https://www.telerik.com/kendo-angular-ui-develop/components/grid) provides intelligent row highlighting functionality through its [AI Smart Box](https://www.telerik.com/kendo-angular-ui-develop/components/grid/smart-grid/ai-toolbar-tool) tool. This feature enables users to visually identify specific data patterns and outliers using natural language prompts, without applying traditional filters that hide data.

AI-powered highlighting interprets user requests and automatically highlights relevant rows based on the specified criteria, making data exploration more intuitive and keeping all data visible while emphasizing important patterns.

> The demo in this article uses a Telerik-hosted AI service for demonstration purposes only. For production applications, you should [implement your own AI service](https://www.telerik.com/kendo-angular-ui-develop/components/grid/smart-grid/ai-service-setup) that understands your specific domain, data, and business requirements.

The following example demonstrates how to implement automatic AI-powered row highlighting to identify data patterns:

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/grid/ai/ai-auto-highlight/source.txt)

## Implementation Steps

To implement AI-powered highlighting in your Grid:

1. Enable the highlight functionality of the Grid by applying the [`kendoGridHighlight`](https://www.telerik.com/kendo-angular-ui-develop/components/grid/api/highlightdirective) directive:

   ```html
   <kendo-grid 
       [kendoGridBinding]="customers"
       kendoGridHighlight
   >
   </kendo-grid>
   ```

2. Add the [`<kendo-grid-smartbox-tool>`](https://www.telerik.com/kendo-angular-ui-develop/components/grid/api/smartboxtoolbartoolcomponent) component to your Grid toolbar with AI Assistant mode enabled:

   ```html
   <kendo-grid ...>
       <kendo-toolbar>
           <kendo-grid-smartbox-tool [aiAssistantMode]="aiAssistantSettings">
           </kendo-grid-smartbox-tool>
       </kendo-toolbar>
   </kendo-grid>
   ```

3. Configure the [`requestUrl`](https://www.telerik.com/kendo-angular-ui-develop/components/grid/api/gridsmartboxaiassistantsettings#requesturl) property in the AI Assistant mode settings to point to your custom AI service endpoint and add suitable [`promptSuggestions`](https://www.telerik.com/kendo-angular-ui-develop/components/grid/api/gridsmartboxaiassistantsettings#promptsuggestions) to guide your users:

   ```typescript
   public aiAssistantSettings: GridSmartBoxAIAssistantSettings = {
       enabled: true,
       requestUrl: 'https://your-ai-service.com/api/grid',
       promptSuggestions: [
           'Highlight high-risk applications',
           'Highlight rows with low credit scores',
           'Clear highlighting',
       ]
   };
   ```

   The `requestUrl` defines the endpoint where your natural language queries will be processed. It should point to [your custom AI service](https://www.telerik.com/kendo-angular-ui-develop/components/grid/smart-grid/ai-service-setup) that can understand your domain-specific data and business logic.

## Suggested Links

* [AI Smart Box](https://www.telerik.com/kendo-angular-ui-develop/components/grid/smart-grid/ai-toolbar-tool)
* [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)
* [Grid Data Operations](https://www.telerik.com/kendo-angular-ui-develop/components/grid/data-operations)
* [Angular Grid Row and Cell Highlighting](https://www.telerik.com/kendo-angular-ui-develop/components/grid/rows/highlighting)
* [API Reference of the GridSmartBoxToolComponent](https://www.telerik.com/kendo-angular-ui-develop/components/grid/api/smartboxtoolbartoolcomponent)