Skip to content

Commit 9cd4904

Browse files
committed
docs(chat): Add client-side events articles
1 parent 728f6d1 commit 9cd4904

File tree

8 files changed

+283
-0
lines changed

8 files changed

+283
-0
lines changed

controls/chat/client-side-programming/events.md

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,21 @@ position: 1
1010

1111
# Events
1212

13+
**RadChat** supports a number of client-side events that let you customize the behavior of the chat:
1314

15+
* [OnActionClick]({%slug chat/client-side-programming/events/onactionclick%}) occurs when an action button is clicked inside an attachment template, or when a suggestedAction is clicked.
16+
17+
* [OnInitialize]({%slug chat/client-side-programming/events/oninitialize%}) occurs when the **RadChat** starts initializing on the client-side.
18+
19+
* [OnLoad]({%slug chat/client-side-programming/events/onload%}) occurs after the **RadChat** has been fully initialized on the client-side.
20+
21+
* [OnPost]({%slug chat/client-side-programming/events/onpost%}) occurs when a message is posted to the **RadChat** control.
22+
23+
* [OnSendMessage]({%slug chat/client-side-programming/events/onsendmessage%}) occurs when a message is posted through the chat message box.
24+
25+
* [OnTypingEnd]({%slug chat/client-side-programming/events/ontypingend%}) occurs when the user clears the chat message box, signaling that he stopped typing. The event is also triggered when the user submits the currenlty typed in message.
26+
27+
* [OnTypingStart]({%slug chat/client-side-programming/events/ontypingstart%}) occurs when the user starts typing in the chat message box. The event is fired only once, and not upon each keystroke.
1428

1529

1630
# See Also
Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
---
2+
title: OnActionClick
3+
page_title: OnActionClick | RadChat for ASP.NET AJAX Documentation
4+
description: OnActionClick
5+
slug: chat/client-side-programming/events/onactionclick
6+
tags: onactionclick
7+
published: True
8+
position: 0
9+
---
10+
11+
# OnActionClick
12+
13+
14+
The **OnActionClick** client-side event fires when an action button is clicked inside an attachment template, or when a suggestedAction is clicked. Equal to the [actionClick](https://docs.telerik.com/kendo-ui/api/javascript/ui/chat/events/actionclick) event of the underlying Kendo UI Chat widget.
15+
16+
The event handler receives two parameters:
17+
18+
1. The Chat instance firing the event.
19+
2. An object with the following methods:
20+
1. get_text() - the text value of the clicked action button;
21+
2. get_sender() - the Kendo UI Chat widget instance which fired the event;
22+
23+
````ASPNET
24+
<script type="text/javascript">
25+
function оnActionClick(sender, args) {
26+
var chat = sender;
27+
var text = args.get_text();
28+
}
29+
</script>
30+
<telerik:RadChat runat="server" ID="RadChat1">
31+
<ClientEvents OnActionClick="оnActionClick" />
32+
</telerik:RadChat>
33+
````
34+
35+
# See Also
36+
37+
* [Kendo UI Chat Events](http://docs.telerik.com/kendo-ui/api/javascript/ui/chat#events)
38+
39+
* [RadChat Client-side events Overview]({%slug chat/client-side-programming/events%})
40+
Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
---
2+
title: OnInitialize
3+
page_title: OnInitialize | RadChat for ASP.NET AJAX Documentation
4+
description: OnInitialize
5+
slug: chat/client-side-programming/events/oninitialize
6+
tags: oninitialize
7+
published: True
8+
position: 1
9+
---
10+
11+
# OnInitialize
12+
13+
The **OnInitialize** client-side event occurs when the **RadChat** starts initializing on the client-side.
14+
15+
The event handler receives one parameter:
16+
17+
1. The Chat instance firing the event.
18+
19+
````ASPNET
20+
<script type="text/javascript">
21+
function onInitialize(sender) {
22+
var chat = sender;
23+
}
24+
</script>
25+
<telerik:RadChat runat="server" ID="RadChat1">
26+
<ClientEvents OnInitialize="onInitialize" />
27+
</telerik:RadChat>
28+
````
29+
30+
# See Also
31+
32+
* [Kendo UI Chat Events](http://docs.telerik.com/kendo-ui/api/javascript/ui/chat#events)
33+
34+
* [RadChat Client-side events Overview]({%slug chat/client-side-programming/events%})
35+
36+
Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
---
2+
title: OnLoad
3+
page_title: OnLoad | RadChat for ASP.NET AJAX Documentation
4+
description: OnLoad
5+
slug: chat/client-side-programming/events/onload
6+
tags: onload
7+
published: True
8+
position: 2
9+
---
10+
11+
# OnLoad
12+
13+
14+
The **OnLoad** client-side event occurs after the **RadChat** has been fully initialized on the client-side.
15+
16+
The event handler receives one parameter:
17+
18+
1. The RadChat instance firing the event.
19+
20+
This event is helpful if you need to get the client-side instance of the RadChat when it is embedded in other controls, if you need to configure a chat agent or if you need to post some initial messages.
21+
22+
````ASPNET
23+
<script type="text/javascript">
24+
function onLoad(sender) {
25+
var chat = sender;
26+
chat.postMessage("Hello!");
27+
}
28+
</script>
29+
<telerik:RadChat runat="server" ID="RadChat1">
30+
<ClientEvents OnLoad="onLoad" />
31+
</telerik:RadChat>
32+
````
33+
34+
# See Also
35+
36+
* [Kendo UI Chat Events](http://docs.telerik.com/kendo-ui/api/javascript/ui/chat#events)
37+
38+
* [RadChat Client-side events Overview]({%slug chat/client-side-programming/events%})
39+
40+
* [Connecting to Chat Bot Services]({%slug chat/how-to/configure-chat-agent%})
41+
Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
---
2+
title: OnPost
3+
page_title: OnPost | RadChat for ASP.NET AJAX Documentation
4+
description: OnPost
5+
slug: chat/client-side-programming/events/onpost
6+
tags: onpost
7+
published: True
8+
position: 3
9+
---
10+
11+
# OnPost
12+
13+
14+
The **OnPost** client-side event fires when a message is posted to the **RadChat** control. This can be either through the message box, or an action button click. Equal to the [post](https://docs.telerik.com/kendo-ui/api/javascript/ui/chat/events/post) event of the underlying Kendo UI Chat widget.
15+
16+
The event handler receives two parameters:
17+
18+
1. The Chat instance firing the event.
19+
2. An object with the following methods:
20+
1. get_from() - this contains the `id`, `name` and `iconUrl` set to the chat instance;
21+
2. get_sender() - the Kendo UI Chat widget instance which fired the event;
22+
3. get_text() - the text value that was posted;
23+
4. get_timestamp() - the current time of posting the message;
24+
5. get_type() - the type of the message. Can be either `message` or `typing`.
25+
26+
````ASPNET
27+
<script type="text/javascript">
28+
function onPost(sender, args) {
29+
var chat = sender;
30+
var text = args.get_text();
31+
var username = get_from().name;
32+
}
33+
</script>
34+
<telerik:RadChat runat="server" ID="RadChat1">
35+
<ClientEvents OnPost="onPost" />
36+
</telerik:RadChat>
37+
````
38+
39+
# See Also
40+
41+
* [Kendo UI Chat Events](http://docs.telerik.com/kendo-ui/api/javascript/ui/chat#events)
42+
43+
* [RadChat Client-side events Overview]({%slug chat/client-side-programming/events%})
44+
Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
---
2+
title: OnSendMessage
3+
page_title: OnSendMessage | RadChat for ASP.NET AJAX Documentation
4+
description: OnSendMessage
5+
slug: chat/client-side-programming/events/onsendmessage
6+
tags: onsendmessage
7+
published: True
8+
position: 4
9+
---
10+
11+
12+
The **OnSendMessage** client-side event fires when a message is posted through the chat message box. Equal to the [sendMessage](https://docs.telerik.com/kendo-ui/api/javascript/ui/chat/events/sendmessage) event of the underlying Kendo UI Chat widget.
13+
14+
The event handler receives two parameters:
15+
16+
1. The Chat instance firing the event.
17+
2. An object with the following methods:
18+
1. get_sender() - the Kendo UI Chat widget instance which fired the event;
19+
2. get_text() - the text value that was entered in the message box;
20+
21+
````ASPNET
22+
<script type="text/javascript">
23+
function onSendMessage(sender, args) {
24+
var chat = sender;
25+
var text = args.get_text();
26+
}
27+
</script>
28+
<telerik:RadChat runat="server" ID="RadChat1">
29+
<ClientEvents OnSendMessage="onSendMessage" />
30+
</telerik:RadChat>
31+
````
32+
33+
# See Also
34+
35+
* [Kendo UI Chat Events](http://docs.telerik.com/kendo-ui/api/javascript/ui/chat#events)
36+
37+
* [RadChat Client-side events Overview]({%slug chat/client-side-programming/events%})
38+
Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
---
2+
title: OnTypingEnd
3+
page_title: OnTypingEnd | RadChat for ASP.NET AJAX Documentation
4+
description: OnTypingEnd
5+
slug: chat/client-side-programming/events/ontypingend
6+
tags: ontypingend
7+
published: True
8+
position: 5
9+
---
10+
11+
The **OnTypingEnd** client-side event fires when the user clears the chat message box, signaling that he stopped typing. The event is also triggered when the user submits the currenlty typed in message. Equal to the [typingEnd](https://docs.telerik.com/kendo-ui/api/javascript/ui/chat/events/typingend) event of the underlying Kendo UI Chat widget.
12+
13+
The event handler receives two parameters:
14+
15+
1. The Chat instance firing the event.
16+
2. An object with the following methods:
17+
1. get_sender() - the Kendo UI Chat widget instance which fired the event;
18+
19+
````ASPNET
20+
<script type="text/javascript">
21+
function onTypingEnd(sender, args) {
22+
var chat = sender;
23+
}
24+
</script>
25+
<telerik:RadChat runat="server" ID="RadChat1">
26+
<ClientEvents OnTypingEnd="onTypingEnd" />
27+
</telerik:RadChat>
28+
````
29+
30+
# See Also
31+
32+
* [Kendo UI Chat Events](http://docs.telerik.com/kendo-ui/api/javascript/ui/chat#events)
33+
34+
* [RadChat Client-side events Overview]({%slug chat/client-side-programming/events%})
35+
Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
---
2+
title: OnTypingStart
3+
page_title: OnTypingStart | RadChat for ASP.NET AJAX Documentation
4+
description: OnTypingStart
5+
slug: chat/client-side-programming/events/ontypingstart
6+
tags: ontypingstart
7+
published: True
8+
position: 6
9+
---
10+
11+
The **OnTypingStart** client-side event fires when the user starts typing in the chat message box. The event is fired only once, and not upon each keystroke. Equal to the [typingStart](https://docs.telerik.com/kendo-ui/api/javascript/ui/chat/events/typingstart) event of the underlying Kendo UI Chat widget.
12+
13+
The event handler receives two parameters:
14+
15+
1. The Chat instance firing the event.
16+
2. An object with the following methods:
17+
1. get_sender() - the Kendo UI Chat widget instance which fired the event;
18+
19+
````ASPNET
20+
<script type="text/javascript">
21+
function onTypingStart(sender, args) {
22+
var chat = sender;
23+
}
24+
</script>
25+
<telerik:RadChat runat="server" ID="RadChat1">
26+
<ClientEvents OnTypingStart="onTypingStart" />
27+
</telerik:RadChat>
28+
````
29+
30+
# See Also
31+
32+
* [Kendo UI Chat Events](http://docs.telerik.com/kendo-ui/api/javascript/ui/chat#events)
33+
34+
* [RadChat Client-side events Overview]({%slug chat/client-side-programming/events%})
35+

0 commit comments

Comments
 (0)