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

AI-Powered Row Highlight

The Angular Grid provides intelligent row highlighting functionality through its AI Assistant Toolbar 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 ...

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>

Apply the kendoGridAIAssistantTool directive to a <kendo-toolbar-button> component, nested within the <kendo-toolbar> tag:

html

<kendo-grid ...>
    <kendo-toolbar>
        <kendo-toolbar-button kendoGridAIAssistantTool>
        </kendo-toolbar-button>
    </kendo-toolbar>
</kendo-grid>

Configure the requestUrl property to point to your custom AI service endpoint:
html
```
<kendo-toolbar-button 
    kendoGridAIAssistantTool
    requestUrl="https://your-ai-service.com/api/grid">
</kendo-toolbar-button>
```
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.

AI-Powered Row Highlight

Suggested Links