Angular Grid AI Toolbar Assistant

The Angular Data Grid AI Toolbar Assistant adds a conversational tool directly into the Kendo UI for Angular Grid toolbar. Instead of clicking through menus for filtering, column changes or highlighting, users describe what they want in plain language and the assistant translates each prompt into concrete Grid operations. The result is a Smart Grid experience that makes complex data exploration accessible to everyone while still respecting your existing Grid configuration and enabled features.

The assistant is implemented through the kendoGridAIAssistantTool directive on a toolbar button that opens a Window hosting an AIPrompt component wired to your AI service. The online demos use a Telerik-hosted AI service for illustration only, while production apps are expected to connect to your own AI endpoint that understands your domain, data and security requirements.

The AI Toolbar Assistant understands a wide range of Grid operations and applies them only if they are enabled on the Angular Grid component. Users can ask to filter, sort, group and page data, as well as resize, reorder, show, hide, lock and unlock columns. The assistant can also control row and cell highlighting, row and cell selection and Excel or PDF export so users can move from insight to action without learning every UI control.

See the Angular Grid supported operations demo.

The AI Toolbar Assistant supports three integration modes so you can choose the level of control your application needs. Automatic integration is the quickest way to get started by providing only a requestUrl. Controlled integration adds requestOptions and lifecycle events so you can adjust headers, authentication and request behavior. Manual integration gives you complete control by intercepting each prompt through the promptRequest event and handling all AI communication yourself. This flexibility lets teams start simple and evolve to more advanced patterns without changing the assistant UI.

See the Angular Grid automatic integration demo.

See the Angular Grid controlled integration demo.

See the Angular Grid manual integration demo.

The AI Toolbar Assistant exposes a rich set of lifecycle events so you can observe and control every step of the AI interaction. Events like promptRequest, cancelRequest, responseSuccess and responseError give you insight into requests and responses, while open and close reveal when the assistant Window and AIPrompt are shown. This enables logging, auditing, custom error handling and UX refinements without losing the benefits of the built-in Smart Grid integration.

See the Angular Grid event handling demo.

Beyond service integration, the AI Toolbar Assistant includes customization options so the experience fits your application rather than the other way around. You can tailor the conversational interface through AIPrompt settings, then align the assistant Window with your layout so it feels like a natural extension of the Angular Grid component. These options help you deliver a branded assistant that still follows the recommended Smart Grid patterns.

See the Angular Grid customization options demo.

Internally the AI Toolbar Assistant uses the AIPrompt component, which you can configure through the aiPromptSettings property. You can add prompt suggestions that showcase useful example commands, enable output rating to capture feedback and turn on the speech to text button to support voice input. This gives you a guided conversational interface that teaches users how to talk to their data while collecting signals about which prompts and outputs work best.

See the Angular Grid AIPrompt customization demo.

The assistant Window can be tuned to match your app shell using the aiWindowSettings configuration. You can control size, title, position, resizing and dragging so the AIPrompt panel fits comfortably alongside dense Grid content on both wide desktops and smaller screens. With a few settings the AI Toolbar Assistant looks and behaves like a first-class part of your Angular layout instead of a generic overlay. 

See the Angular Grid window appearance demo.

You can pair the AI Toolbar Assistant with AI-powered row highlighting to help users spot patterns without hiding data. By combining kendoGridAIAssistantTool with the kendoGridHighlight directive, prompts such as "Highlight rows where amount is above 10,000" or "Highlight all recent renewals" will visually emphasize matching rows while keeping the full dataset visible. This makes it easier to identify outliers, risk ranges and status changes that traditional filters might obscure. 

See the Angular Grid AI-powered row highlight demo.