Introduction
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

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 should control:
Razor
  -  .Filterable()
  -  .Groupable()
  -  .Scrollable()
  1. Enable the AiAssistant tool in the Grid's toolbar:
Razor
    .ToolBar(t =>
    {
        t.AIAssistant();
    })
  1. Configure the Service property to point to your custom AI service endpoint:
Razor
    .AI(ai => ai
        .Service("https://demos.telerik.com/service/v2/ai/grid/smart-state")
    )

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.

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.

    Razor
      {
    "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.

    Razor
      {
    "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.

    Razor
      {
    "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 UpAI Service IntegrationAutomatic IntegrationManual IntegrationCustomization OptionsAIPrompt CustomizationWindow AppearanceSuggested Links
Not finding the help you need?
Contact Support