New to Telerik UI for ASP.NET Core? Start a free 30-day trial
Adornments
Updated on May 13, 2026
The Chat component supports PromptBox adornments that let you place custom UI elements around the input area. You can render content before the input, after the input, or above it to enable custom actions, settings, and context selectors.
Use the demo source tabs to compare the wrapper syntax in each platform:
PromptBox Affix Templates
Use the following message box options to configure PromptBox adornments:
StartAffixTemplate()—Renders content before the message input.EndAffixTemplate()—Renders content after the message input.TopAffixTemplate()—Renders content above the message input.
Start and End Adornments
The example below configures action buttons in the start and end PromptBox areas.
Razor
@(Html.Kendo().Chat()
.Name("chat")
.AuthorId("user")
.MessageBox(messageBox => messageBox
.Mode(PromptBoxMode.Single)
.StartAffixTemplate("<button class='k-button k-button-flat k-button-sm' type='button'>Source</button>")
.EndAffixTemplate("<button class='k-button k-button-flat k-button-sm' type='button'>Settings</button>")
)
)Top Adornment
Use a top affix template to add controls such as model selection above the input:
Razor
@(Html.Kendo().Chat()
.Name("chat")
.AuthorId("user")
.MessageBox(messageBox => messageBox
.Mode(PromptBoxMode.Multi)
.Rows(3)
.TopAffixTemplate("<div class='chat-model-affix'><select id='chat-model'></select></div>")
)
)
<script>
$(document).on("kendoReady", function() {
$("#chat-model").kendoDropDownList({
dataSource: ["GPT-4o", "GPT-4o mini", "Claude 3.5 Haiku"],
value: "GPT-4o"
});
});
</script>