Toolbar
The Toolbar of the Telerik UI for ASP.NET Core Chat allows you to add toolbar actions for achieving a more user-friendly conversational UI.
The Chat toolbar is located below the input box of the component. You can display or hide the toolbar by clicking the toolbar icon which is placed to the left of the Send button.
Configuring the Items
To configure the toolbar items, use the Toolbar.Buttons() configuration method. Depending on the executed command in the toolbar, you can also implement a specific functionality by handling the ToolClick event.
The following example demonstrates how to configure the toolbar items for the Chat.
@(Html.Kendo().Chat()
.Name("chat")
.Events(e => e.ToolClick("onToolClick"))
.Toolbar(toolbar =>
{
toolbar.Toggleable(true);
toolbar.Buttons(buttons =>
{
buttons.Add().Name("ButtonA").IconClass("k-icon k-i-image");
buttons.Add().Name("ButtonB").IconClass("k-icon k-i-wrench");
});
})
)
<script>
function onToolClick(e){
console.log("Button name: " + e.name);
}
</script>
<kendo-chat name="chat" on-tool-click="onToolClick">
<toolbar toggleable="true">
<buttons>
<button name="ButtonA" icon-class="k-icon k-i-image"/>
<button name="ButtonB" icon-class="k-icon k-i-wrench"/>
</buttons>
</toolbar>
</kendo-chat>
<script>
function onToolClick(e){
console.log("Button name: " + e.name);
}
</script>
Configuring the Behavior
The toolbar of the Chat provides the following methods that allow you to further configure its behavioral aspects:
-
Animation()—Represents the toggle animation of the toolbar. -
Scrollable()—Enables or disables the scrollable behavior of the toolbar. -
Toggleable()—Enables or disables the toggleable behavior of the toolbar.
@(Html.Kendo().Chat()
.Name("chat")
.Toolbar(toolbar => toolbar
.Toggleable(true)
.Scrollable(true)
.Animation(animation => animation
.Collapse(collapse => collapse
.Expand(ExpandDirection.Vertical)
.Fade(FadeDirection.In)
.Duration(500)
)
)
.Buttons(buttons =>
{
buttons.Add().Name("ButtonA").IconClass("k-icon k-i-image");
buttons.Add().Name("ButtonB").IconClass("k-icon k-i-wrench");
})
)
)
<kendo-chat name="chat">
<toolbar toggleable="true" scrollable="true">
<animation enabled="true">
<expand effects="expand:vertical fadeIn" duration="500" />
<collapse effects="expand:vertical fadeIn" duration="500" />
</animation>
<buttons>
<button name="ButtonA" icon-class="k-icon k-i-image" />
<button name="ButtonB" icon-class="k-icon k-i-wrench" />
</buttons>
</toolbar>
</kendo-chat>