Skip to content

Commit d7968af

Browse files
author
Kendo Bot
committed
Sync with Kendo UI Professional
1 parent 2a9c783 commit d7968af

File tree

4 files changed

+122
-12
lines changed

4 files changed

+122
-12
lines changed

‎docs-aspnet/html-helpers/conversational-ui/chat/overview.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
title: Overview
3-
page_title: Overview
3+
page_title: Chat Overview
44
description: "Learn the basics when working with the Telerik UI Chat component for {{ site.framework }}."
55
previous_url: /helpers/html-helpers/chat, /helpers/conversational-ui/chat/overview
66
slug: htmlhelpers_chat_aspnetcore
@@ -86,5 +86,5 @@ The Chat provides an option for creating a [Peer-to-Peer Chat application by usi
8686

8787
## See Also
8888

89-
* [Basic Usage of the Chat component for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/chat/index)
90-
* [Server-Side API](/api/chat)
89+
* [Basic Usage of the Chat for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/chat/index)
90+
* [Server-Side API of the Chat for {{ site.framework }}](/api/chat)

‎docs-aspnet/html-helpers/conversational-ui/chat/razor-page.md‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
---
2-
title: Razor Page
3-
page_title: Configure a Chat in Razor Page.
4-
description: "An example on how to configure the Telerik UI Chat component for {{ site.framework }} in a Razor Page."
2+
title: Razor Pages Support
3+
page_title: Configuring the Chat in Razor Pages
4+
description: "Learn how to configure the Telerik UI Chat component for {{ site.framework }} in Razor Pages."
55
slug: htmlhelpers_chat_razorpage_aspnetcore
66
position: 3
77
---
88

9-
# Razor Page
9+
# Chat Support for Razor Pages
1010

11-
This article describes how to configure the Telerik UI Chat component for {{ site.framework }} in a RazorPage scenario.
11+
This article describes how to configure the Telerik UI Chat component for {{ site.framework }} in a Razor Pages scenario.
1212

13-
For the full project with RazorPages examples, visit our [GitHub repository](https://github.com/telerik/ui-for-aspnet-core-examples/tree/master/Telerik.Examples.RazorPages).
13+
For the full project, refer to the [Razor Pages examples on GitHub](https://github.com/telerik/ui-for-aspnet-core-examples/tree/master/Telerik.Examples.RazorPages).
1414

1515
```tab-HtmlHelper
1616
@inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf
@@ -71,6 +71,6 @@ For the full project with RazorPages examples, visit our [GitHub repository](htt
7171

7272
## See Also
7373

74-
* [Razor Pages Support]({% slug razor_pages_integration_aspnetmvc6_aspnetmvc %})
75-
* [Chat Overview]({% slug htmlhelpers_chat_aspnetcore %})
74+
* [Razor Pages Support by Telerik UI for {{ site.framework }}]({% slug razor_pages_integration_aspnetmvc6_aspnetmvc %})
75+
* [Overview of the Chat for {{ site.framework }}]({% slug htmlhelpers_chat_aspnetcore %})
7676

‎docs-aspnet/html-helpers/conversational-ui/chat/signalr-p-to-p.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -364,4 +364,4 @@ In the `Views\Home\Index.cshtml` fie, initialize the Chat and implement handlers
364364
## See Also
365365
366366
* [Basic Usage of the Chat HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/chat/index)
367-
* [Server-Side API](/api/chat)
367+
* [Server-Side API of the Chat for {{ site.framework }}](/api/chat)

‎docs-aspnet/html-helpers/conversational-ui/chat/toolbar.md‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
---
2+
title: Toolbar
3+
page_title: Chat Toolbar
4+
description: "Learn how to configure the toolbar of the Telerik UI Chat component for {{ site.framework }}."
5+
slug: htmlhelpers_chat_toolbar_aspnetcore
6+
position: 4
7+
---
8+
9+
# Toolbar
10+
11+
The Toolbar of the Telerik UI for {{ site.framework }} Chat allows you to add toolbar actions for achieving a more user-friendly conversational UI.
12+
13+
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.
14+
15+
## Configuring the Items
16+
17+
To configure the toolbar items, use the [`Toolbar.Buttons()`](https://docs.telerik.com/{{ site.platform }}/api/Kendo.Mvc.UI.Fluent/ChatToolbarSettingsBuilder#buttonssystemaction) configuration method. Depending on the executed command in the toolbar, you can also implement a specific functionality by handling the [`ToolClick`](https://docs.telerik.com/{{ site.platform }}/api/Kendo.Mvc.UI.Fluent/ChatEventBuilder#toolclicksystemstring) event.
18+
19+
The following example demonstrates how to configure the toolbar items for the Chat.
20+
21+
```HtmlHelper
22+
@(Html.Kendo().Chat()
23+
.Name("chat")
24+
.Events(e => e.ToolClick("onToolClick"))
25+
.Toolbar(toolbar =>
26+
{
27+
toolbar.Toggleable(true);
28+
toolbar.Buttons(buttons =>
29+
{
30+
buttons.Add().Name("ButtonA").IconClass("k-icon k-i-image");
31+
buttons.Add().Name("ButtonB").IconClass("k-icon k-i-wrench");
32+
});
33+
})
34+
)
35+
36+
<script>
37+
function onToolClick(e){
38+
console.log("Button name: " + e.name);
39+
}
40+
</script>
41+
```
42+
{% if site.core %}
43+
```TagHelper
44+
<kendo-chat name="chat" on-tool-click="onToolClick">
45+
<toolbar toggleable="true">
46+
<buttons>
47+
<button name="ButtonA" icon-class="k-icon k-i-image"/>
48+
<button name="ButtonB" icon-class="k-icon k-i-wrench"/>
49+
</buttons>
50+
</toolbar>
51+
</kendo-chat>
52+
53+
<script>
54+
function onToolClick(e){
55+
console.log("Button name: " + e.name);
56+
}
57+
</script>
58+
```
59+
{% endif %}
60+
61+
## Configuring the Behavior
62+
63+
The toolbar of the Chat provides the following methods that allow you to further configure its behavioral aspects:
64+
65+
* `Animation()`&mdash;Represents the toggle animation of the toolbar.
66+
* `Scrollable()`&mdash;Enables or disables the scrollable behavior of the toolbar.
67+
* `Toggleable()`&mdash;Enables or disables the toggleable behavior of the toolbar.
68+
69+
```HtmlHelper
70+
@(Html.Kendo().Chat()
71+
.Name("chat")
72+
.Toolbar(toolbar => toolbar
73+
.Toggleable(true)
74+
.Scrollable(true)
75+
.Animation(animation => animation
76+
.Collapse(collapse => collapse
77+
.Expand(ExpandDirection.Vertical)
78+
.Fade(FadeDirection.In)
79+
.Duration(500)
80+
)
81+
)
82+
.Buttons(buttons =>
83+
{
84+
buttons.Add().Name("ButtonA").IconClass("k-icon k-i-image");
85+
buttons.Add().Name("ButtonB").IconClass("k-icon k-i-wrench");
86+
})
87+
)
88+
)
89+
```
90+
{% if site.core %}
91+
```TagHelper
92+
<kendo-chat name="chat">
93+
<toolbar toggleable="true" scrollable="true">
94+
<animation enabled="true">
95+
<expand effects="expand:vertical fadeIn" duration="500" />
96+
<collapse effects="expand:vertical fadeIn" duration="500" />
97+
</animation>
98+
<buttons>
99+
<button name="ButtonA" icon-class="k-icon k-i-image" />
100+
<button name="ButtonB" icon-class="k-icon k-i-wrench" />
101+
</buttons>
102+
</toolbar>
103+
</kendo-chat>
104+
```
105+
{% endif %}
106+
107+
## See Also
108+
109+
* [Using the Chat Toolbar HtmlHelper for {{ site.framework}} (Demo)](https://demos.telerik.com/{{site.platform}}/chat/toolbar)
110+
* [Server-Side API of the Chat for {{ site.framework }}](/api/chat)

0 commit comments

Comments
 (0)