Introduction
AI Components & Features
Knowledge Base
Components / Data Management / Grid / Smart Grid / AI Toolbar Assistant
New to Telerik UI for ASP.NET Core? Start a free 30-day trial

Core Data Grid AI Toolbar Assistant

Updated on Nov 10, 2025

The Telerik UI Grid provides a built-in AI Assistant toolbar tool that allows users to interact with the Grid using natural language prompts. Use this feature to enable your end users to perform complex data operations like sorting, filtering, grouping, and highlighting without having to use the specific UI controls.

The AI Assistant interprets user requests and automatically applies the corresponding Grid operations, making data exploration more intuitive and accessible. The toolbar integrates an AIPrompt component that enables natural language interaction with your custom AI service.

AI Assistant Tool Basic Set Up

The desired data operations (Filterable, Sortable, Groupable) must be enabled for the Grid, so that the AI Assistant can perform them on the Grid data.

To configure the Grid's AI Assistant toolbar tool:

  1. Set up data binding in the Grid and enable the required data operations that the AI must control:

    Razor
    @(Html.Kendo().Grid<PatientRecord>()
  .Name("grid")
  .Filterable()
  .Groupable()
  .Sortable()
  ... // Additional configuration options.
)

  2. Enable the AiAssistant() tool in the Grid's toolbar:

    Razor
    @(Html.Kendo().Grid<PatientRecord>()
  .Name("grid")   
  .ToolBar(t =>
  {
        t.AIAssistant();
  })
  ... // Additional configuration options.
)

  3. Configure the Service option to point to the AI service endpoint:

    Razor
    @(Html.Kendo().Grid<PatientRecord>()
  .Name("grid")   
  .AI(ai => ai
      .Service("https://demos.telerik.com/service/v2/ai/grid/smart-state")
  )
  ... // Additional configuration options.
)

The AI service defines the endpoint where your natural language queries will be processed. It must point to your custom AI service that can understand your domain-specific data and business logic.

Row Highlighting

One of the key features of the AI Assistant toolbar tool is the ability to visually highlight Grid rows based on natural language prompts. When users enter prompts containing the word highlight, the Grid automatically processes the request and applies visual highlighting to the matching data.

The highlighting functionality enables users to quickly identify and visualize data patterns without having to manually configure filters or complex search criteria. The AI service interprets the natural language request and determines which rows must be highlighted based on the specified conditions.

Common highlighting use cases include:

  • Conditional highlighting—Highlight rows where age is above 60 will visually emphasize all rows meeting that criteria.
  • Date-based highlighting—Highlight all admissions after July 15th, 2024 will mark rows with dates matching the condition.
  • Status-based highlighting—Highlight rows with critical patients will emphasize rows based on status values.
  • Numeric range highlighting—Highlight risk scores between 30% and 50% will highlight rows within the specified range.
  • Clear highlighting—Clear highlighting will remove all applied highlighting effects.

Users can combine highlighting with other data operations like filtering, sorting, and grouping.

AI Service Integration

The AI Assistant toolbar tool supports two main integration approaches depending on how you want to handle AI service communication:

Automatic Integration

In the automatic approach, the AI Assistant toolbar tool handles all communication with your AI service internally through HTTP requests. You simply need to configure the AI service property to point to your custom AI service endpoint.

The following example demonstrates a Grid with AI Assistant functionality that processes natural language requests for data operations:

Razor
@(Html.Kendo().Grid<PatientRecord>()
    .Name("grid")
    .Columns(c =>
    {
        c.Bound(p => p.PatientName).Title("Patient Name").Width(180);
        c.Bound(p => p.Age).Title("Age").Width(80);
        c.Bound(p => p.ConditionSeverity)
            .Title("Condition Severity")
            .Width(160)
            .ClientTemplate("<span class='condition-badge'></span>");
        c.Bound(p => p.Department).Title("Department").Width(180);
        c.Bound(p => p.Status)
            .Title("Status")
            .Width(180)
            .ClientTemplate("<span class='status-chip'></span>");
        c.Bound(p => p.AdmissionDate).Title("Admission Date").Width(140).Format("{0:dd-MM-yy}");
        c.Bound(p => p.RiskScore)
            .Title("Risk Score")
            .ClientTemplate("<div class='progressbar'></div>");
    })
    .ToolBar(t =>
    {
        t.AIAssistant();
        t.Spacer();
        t.Custom().Name("resetChanges").Text("Reset changes").IconClass("k-icon k-i-arrow-rotate-ccw");
    })
    .AI(ai => ai
        .Service("https://demos.telerik.com/service/v2/ai/grid/smart-state")
        .AIAssistant(a => a.PromptSuggestions(new[]
        {
            "Highlight age cells above 60",
            "Mark all rows with critical care admissions after 15th of July 2024",
            "Highlight rows with patients over 65 still under treatment",
            "Highlight rows with patients not in Emergency department",
            "Highlight rows with risk score between 30% and 50%",
            "Clear highlighting"
        }))
        .AIAssistantWindow(ws => ws.Width(500).Height(460))
    )
    .Pageable()
    .Sortable()
    .Filterable()
    .Scrollable(s => s.Height(600))
    .HtmlAttributes(new { style = "height:600px;" })
    .DataSource(ds => ds.Ajax()
        .Read(r => r.Action("Patients_Read", "Grid"))
        .PageSize(20)
        .Model(m => m.Id(x => x.Id))
    )
    .Events(e => e.DataBound("onGridDataBound"))
)

With automatic integration, the Grid is configured to work directly with your AI service. If the service returns the correct descriptors, the Grid can automatically interpret and apply the requested operations, enabling seamless setup and usage without additional manual configuration.

The examples below represent sample responses for the basic data operations:

  • Filtering—Accepts an object with filter conditions and logic operators.

    JSON
    {
  "filter": {
    "logic": "and",
    "filters": [
      {
        "field": "Currency",
        "operator": "eq",
        "value": "USD"
      }
    ]
  },
  "messages": [
    "Filtered by the field Currency with the value equal to USD"
  ]
}

  • Sorting—Accepts an array of objects specifying field names and sort directions.

    JSON
    {
  "sort": [
    {
      "field": "Amount",
      "dir": "desc"
    }
  ],
  "messages": [
    "Sorted by the field Amount in descending order."
  ]
}

  • Grouping—Accepts an array of objects defining the fields to group by.

    JSON
    {
  "group": [
    {
      "field": "AccountType",
      "dir": "desc"
    }
  ],
  "messages": [
    "Grouped by the field AccountType in descending order."
  ]
}

Manual Integration

For full control over the AI interaction, you can manually integrate your AI service by handling the PromptRequest event of the tool. This allows you to perform entirely custom requests to your AI service while using the UI that the AI Assistant provides.

The PromptRequest event provides useful information that you can use in your custom AI service integration. The requestData field of the event contains the user's prompt, Grid column information, and HTTP request settings, while isRetry indicates whether this is a retry attempt.

When the response from the service is received, you can utilize the PromptResponse event and handle the returned data.

In the AI Assistant configuration, you can handle all events provided by the integrated AIPrompt component.

These event details allow you to implement fully customized AI service communication while maintaining access to the Grid context and user input.

Customization Options

The AI Assistant toolbar tool provides various configuration options to customize the experience based on your application requirements:

AIPrompt Customization

The AI Assistant toolbar tool utilizes the AIPrompt component internally to provide a conversational interface. You can customize the AIPrompt interface and user interaction by using the AI Assistant property of the tool.

This property allows you to add PromptSuggestions tailored to your specific use case that can guide users with examples of what your AI service can understand. Furthermore, the SpeechToTextButton setting provides voice input capabilities for enhancing accessibility in your application.

Razor
    .AI(ai => ai
        .Service("https://demos.telerik.com/service/v2/ai/grid/smart-state")
        .AIAssistant(a => a.PromptSuggestions(new[]
        {
            "Highlight age cells above 60",
            "Mark all rows with critical care admissions after 15th of July 2024",
            "Highlight rows with patients over 65 still under treatment",
            "Highlight rows with patients not in Emergency department",
            "Highlight rows with risk score between 30% and 50%",
            "Clear highlighting"
        }))
    )

Window Appearance

You can also customize the appearance of the Window component, in which the AIPrompt of the toolbar tool is rendered.

To achieve this, use the AIAssistantWindow property, which allows you to control the positioning and visual appearance of the Window to match your application's design and requirements.

Razor
.AI(ai => ai
    .Service("https://demos.telerik.com/service/v2/ai/grid/smart-state")
    .AIAssistantWindow(ws => ws.Width(500).Height(460))
)
In this article
AI Assistant Tool Basic Set UpRow HighlightingAI Service IntegrationAutomatic IntegrationManual IntegrationCustomization OptionsAIPrompt CustomizationWindow AppearanceSuggested Links
Not finding the help you need?
Contact Support