Grid AI Column Assistant

The Grid AI Column Assistant is an integration between the Telerik Inline AI Prompt and Grid components. This article shows how to display an Inline AI Prompt from a Grid column template to allow users to use AI for a specific Grid data item. Depending on the business requirements, the AI model can analyze the Grid data item and suggest additions or modifications.

The suggested algorithm for implementation is the following:

1. Configure an InlineAIPrompt component that receives and provides the user prompt.
2. Add a Grid column with a button that displays the InlineAIPrompt component.
3. (optional) Implement an additional property of the Grid model class for AI content.
4. Update the Grid data or perform another action, based on the AI response.

Define InlineAIPrompt Component

Follow the InlineAIPrompt component documentation to configure an Inline AI Prompt component. Users can type an arbitrary prompt or optionally, pick from a predefined list of suggestions.

RAZOR

<TelerikInlineAIPrompt @ref="@InlineAIPromptRef"
                       @bind-Prompt="@UserPrompt"
                       Commands="@PredefinedPromptSuggestions"
                       OnCommandExecute="@OnPredefinedPromptSuggestionSelect"
                       OutputActions="@ActionsOverAIResponse"
                       OnOutputActionClick="@OnAIResponseActionClick"
                       OnPromptRequest="@SendAIRequestAndGetResponse" />

@code {
    private TelerikInlineAIPrompt? InlineAIPromptRef { get; set; }

    private string UserPrompt { get; set; } = string.Empty;

    // List optional predefined prompt suggestions.
    private List<InlineAIPromptCommandDescriptor> PredefinedPromptSuggestions { get; set; } = new();

    // Define possible actions over the AI response.
    private List<InlineAIPromptOutputActionDescriptor> ActionsOverAIResponse { get; set; } = new();

    private void OnPredefinedPromptSuggestionSelect(InlineAIPromptCommandExecuteEventArgs args)
    {
        // This handler executes when the user selects a predefined prompt.

        Prompt = args.Command.Prompt;
    }

    private async Task SendAIRequestAndGetResponse(InlineAIPromptPromptRequestEventArgs args)
    {
        // This handler executes when the user submits their AI prompt.
        // Set the AI service response to args.Output.

        args.Output = "The AI response to the user prompt.";
    }

    private async Task OnAIResponseActionClick(InlineAIPromptOutputActionClickEventArgs args)
    {
        // This handler executes when the user clicks on an action from ActionsOverAIResponse.
        // You can modify the Grid data source here.
    }
}

Add Grid Column with Button

Add a Grid column with no Field. The column must have a <Template> to render a button that saves the current Grid data item and displays the InlineAIPrompt component.

RAZOR

<GridColumn Resizable="false" Width="70px">
    <Template>
        @{
            var dataItem = (GridModel)context;

            <TelerikButton OnClick="@((MouseEventArgs args) => OnAIButtonClick(dataItem, args))"
                           Icon="@nameof(SvgIcon.Sparkles)" />
        }
    </Template>
</GridColumn>

@code {
    // GridModel is the Grid data item type
    private GridModel? DataItemForAI { get; set; }

    private async Task OnAIButtonClick(GridModel dataItem, MouseEventArgs args)
    {
        // Get the clicked Grid data item for later use.
        DataItemForAI = dataItem;

        // Show the InlineAIPrompt.
        await InlineAIPromptRef.ShowAsync(args.ClientX, args.ClientY);
    }
}

Add Grid Column for AI Content

You can save the AI response in a separate model property in the Grid data. To display that AI content, define its dedicated column:

RAZOR

<GridColumn Field="@nameof(GridModel.AIGenerated)" Title="AI Content" />

Update Grid Data

Update the Grid data in the OnOutputActionClick event of the InlineAIPrompt. Theoretically, you can also update the Grid data in the OnPromptRequest event of the InlineAIPrompt. However, this approach skips the user review and approval, which is normally not recommended.

C#

// DataItemForAI is populated in the OnClick handler of the Button (OnAIButtonClick method).
private GridModel? DataItemForAI { get; set; }

// This is the OnOutputActionClick event handler of the InlineAIPrompt
private async Task OnAIResponseActionClick(InlineAIPromptOutputActionClickEventArgs args)
{
    // If the user approves the AI response, update the Grid data.
    // args.Action is a member of the ActionsOverAIResponse collection.
    if (args.Action.Name == "Insert")
    {
        DataItemForAI.AIGenerated = args.Output;

        await InlineAIPromptRef.HideAsync();
    }
}

Example

See the Grid AI Column Assistant live demo for a complete runnable example. The demo uses a Telerik-hosted AI service for demonstration purposes only. See Integration with Telerik.AI.SmartComponents.Extensions for more information on how you can implement your own server-side AI service to be compatible with the Telerik Grid.

See Also

• InlineAIPrompt Overview
• Grid Live Demo
• Grid API
• Integration with Telerik.AI.SmartComponents.Extensions