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

Angular Data Grid AI Row Highlight

Updated on Feb 6, 2026

The Angular Grid provides intelligent row highlighting functionality through its AI Smart Box 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 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:

Change Theme

Theme

Loading ...

Implementation Steps

To implement AI-powered highlighting in your Grid:

Enable the highlight functionality of the Grid by applying the kendoGridHighlight directive:

html

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

Add the <kendo-grid-smartbox-tool> 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>

Configure the requestUrl property in the AI Assistant mode settings to point to your custom AI service endpoint and add suitable 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 that can understand your domain-specific data and business logic.

Angular Data Grid AI Row Highlight

Implementation Steps

Suggested Links