Skip to content

Commit 139d5b4

Browse files
vveesseelliinnaavveesseelliinnaa
committed
docs(chat): Add new article about RadChat toolbar
1 parent 16c43d8 commit 139d5b4

File tree

3 files changed

+108
-0
lines changed

3 files changed

+108
-0
lines changed

‎controls/chat/functionality/toolbar.md‎

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
---
2+
title: Toolbar
3+
page_title: Toolbar | RadChat for ASP.NET AJAX Documentation
4+
description: Toolbar
5+
slug: chat/functionality/toolbar
6+
tags: toolbar, buttons
7+
published: True
8+
position: 4
9+
---
10+
11+
# Chat Toolbar
12+
13+
14+
The toolbar of **RadChat** control allows you to add toolbar actions for achieving more user-friendly conversational UI.
15+
16+
The toolbar is located below the input box of the Chat. You can display or hide the toolbar by clicking the toolbar icon which is placed to the left of the Send button. The **RadChat** toolbar enables you to add buttons for end-user interaction. Depending on the executed command in the toolbar, you can also implement a specific functionality by handling the [toolClick]({%slug chat/client-side-programming/events/ontoolclick%}) event of the control.
17+
18+
The following examples demonstrates how to add a custom action buttons to the toolbar of the **RadChat** and define the control's behavior. The image below is a result from **Example 2**:
19+
20+
>caption **Figure 2**: A Chat with expandable toolbar.
21+
![chat with expandable toolbar](../images/chat-toolbar-actions.gif)
22+
23+
## Configure Toolbar Items
24+
25+
To configure the Toolbar items, use the composite `ButtonsCollection` property of the Chat.
26+
27+
>caption **Figure 1**: A Chat with toolbar buttons.
28+
29+
![chat with toolbar buttons](../images/chat-toolbar-buttons.png)
30+
31+
>caption **Example 1**: A Chat with toolbar buttons.
32+
33+
````ASPX
34+
<style type="text/css">
35+
.t-i-image::before {content: "\e501";}
36+
.t-i-clip::before {content: "\e10e";}
37+
</style>
38+
<script type="text/javascript">
39+
function toolClick(sender, args) {
40+
var commandName = args.get_name();
41+
alert("You clicked the " + commandName + " button.")
42+
}
43+
</script>
44+
<telerik:RadChat runat="server" ID="RadChat1" Skin="Default" Height="300px">
45+
<ToolbarSettings>
46+
<ButtonsCollection>
47+
<telerik:ChatToolbarButton Text="Add image" Name="AddImage" IconClass="t-icon t-i-image" />
48+
<telerik:ChatToolbarButton Text="Add file" Name="AddFile" IconClass="t-icon t-i-clip" />
49+
</ButtonsCollection>
50+
</ToolbarSettings>
51+
<ClientEvents OnToolClick="toolClick" />
52+
</telerik:RadChat>
53+
````
54+
55+
56+
## Configure Toolbar Behavior
57+
58+
The Chat configuration object allows you to configure the following behavior aspects of the toolbar:
59+
60+
- `AnimationSettings` - The [animation](https://docs.telerik.com/kendo-ui/api/javascript/ui/chat/configuration/toolbar.animation) behavior of its toolbar.
61+
- `Scrollable` - defines whether the toolbar will be [scrollable](https://docs.telerik.com/kendo-ui/api/javascript/ui/chat/configuration/toolbar.scrollable). A scrollbar is useful when the buttons cannot entirely fit within the width of RadChat.
62+
- `Toggleable` - Whether the toolbar will be [displayed or hidden](https://docs.telerik.com/kendo-ui/api/javascript/ui/chat/configuration/toolbar.toggleable) upon a button click.
63+
64+
65+
>caption **Example 2**: A Chat with a expandable toolbar.
66+
67+
````ASPX
68+
<style type="text/css">
69+
.t-i-image::before {content: "\e501";}
70+
.t-i-clip::before {content: "\e10e";}
71+
</style>
72+
<telerik:RadChat runat="server" ID="RadChat1" Skin="Default" Height="300px">
73+
<ToolbarSettings Toggleable="true" Scrollable="true">
74+
<ButtonsCollection>
75+
<telerik:ChatToolbarButton Text="Add image" Name="AddImage" IconClass="t-icon t-i-image" />
76+
<telerik:ChatToolbarButton Text="Add file" Name="AddFile" IconClass="t-icon t-i-clip" />
77+
<telerik:ChatToolbarButton Text="Add image 1" Name="AddImage1" IconClass="t-icon t-i-image" />
78+
<telerik:ChatToolbarButton Text="Add file 1" Name="AddFile1" IconClass="t-icon t-i-clip" />
79+
<telerik:ChatToolbarButton Text="Add image 2" Name="AddImage2" IconClass="t-icon t-i-image" />
80+
<telerik:ChatToolbarButton Text="Add file 2" Name="AddFile2" IconClass="t-icon t-i-clip" />
81+
<telerik:ChatToolbarButton Text="Add image 3" Name="AddImage3" IconClass="t-icon t-i-image" />
82+
<telerik:ChatToolbarButton Text="Add file 3" Name="AddFile3" IconClass="t-icon t-i-clip" />
83+
<telerik:ChatToolbarButton Text="Add image 4" Name="AddImage4" IconClass="t-icon t-i-image" />
84+
<telerik:ChatToolbarButton Text="Add file 4" Name="AddFile4" IconClass="t-icon t-i-clip" />
85+
<telerik:ChatToolbarButton Text="Add image 5" Name="AddImage5" IconClass="t-icon t-i-image" />
86+
<telerik:ChatToolbarButton Text="Add file 5" Name="AddFile5" IconClass="t-icon t-i-clip" />
87+
</ButtonsCollection>
88+
<AnimationSettings>
89+
<CollapseSettings Duration="500" Effects="expandVertical fadeIn" />
90+
<ExpandSettings Duration="500" Effects="expandVertical fadeIn" />
91+
</AnimationSettings>
92+
</ToolbarSettings>
93+
</telerik:RadChat>
94+
````
95+
96+
97+
# See Also
98+
99+
* [RadChat Structure]({%slug chat/structure%})
100+
101+
* [RadChat Server-Side Programming]({%slug diagram/server-side-programming%})
102+
103+
* [RadChat Client-Side Programming]({%slug chat/client-side-programming/overview%})
104+
105+
* [Kendo UI Toolbar](https://docs.telerik.com/kendo-ui/controls/conversational-ui/chat/toolbar)
106+
107+
* [RadChat Online Demos](http://demos.telerik.com/aspnet-ajax/chat/overview/defaultcs.aspx)
108+

‎controls/chat/images/chat-toolbar-actions.gif‎

131 KB
Loading

‎controls/chat/images/chat-toolbar-buttons.png‎

3.56 KB
Loading

0 commit comments

Comments
 (0)