New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Templates

The WebForms AIPrompt allows you to customize the appearance of the prompt suggestions, and to add a custom view using templates.

This demo shows how to add a custom view through the Views collection. You will also see a customized appearance of the prompt suggestions through the PromptSuggestionItemTemplate option.

  • DefaultVB.aspx
  • DefaultVB.aspx.vb
  • script.js
  • styles.css
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="DefaultVB.aspx.vb" Inherits="AIPrompt_Overview_DefaultVB"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="Stylesheet" type="text/css" />
    <script src="script.js"></script>
</head>

<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container flex-center size-medium">
        <telerik:RadAIPrompt ID="RadAIPrompt1" runat="server" Width="450px">
            <PromptSuggestionItemTemplate>
                <span role="listitem" class="k-prompt-suggestion prompt-suggestion-item">#: suggestion #</span>
            </PromptSuggestionItemTemplate>
            <Views>
                <telerik:AIPromptView Type="Prompt" />
                <telerik:AIPromptView Type="Output" />
                <telerik:AIPromptView Type="Custom" ButtonIcon="pencil">
                    <ViewTemplate>
                        <div>
                            <p>Custom View</p>
                        </div>
                    </ViewTemplate>
                    <FooterTemplate>
                        <div>
                            <p>Custom Footer</p>
                        </div>
                    </FooterTemplate>
                </telerik:AIPromptView>
            </Views>
            <PromptCommands>
                <telerik:ViewPromptCommand ID="Command1" Text="Simplify" Icon="min-width" />
                <telerik:ViewPromptCommand ID="Command2" Text="Extend" Icon="arrows-left-right" />
            </PromptCommands>
            <ClientEvents OnPromptRequest="onPromptRequest" />
        </telerik:RadAIPrompt>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance