Skip to content

Commit 728f6d1

Browse files
pepinho24pepinho24
committed
docs(chat): Add RadChat client-side object article and Update Client-side programming Overview
1 parent aa1c677 commit 728f6d1

File tree

2 files changed

+99
-3
lines changed

2 files changed

+99
-3
lines changed

‎controls/chat/client-side-programming/objects/radchat.md‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
---
2+
title: Chat Object
3+
page_title: RadChat Object | RadChat for ASP.NET AJAX Documentation
4+
description: RadChat Object
5+
slug: chat/client-side-programming/objects/radchat
6+
tags: chatobject
7+
published: True
8+
position: 0
9+
---
10+
11+
# RadChat Object
12+
13+
The **RadChat** control is built on top of the [Kendo UI Chat](http://demos.telerik.com/kendo-ui/chat/index). This allows you to interact with the chat entirely on the client-side. When you have referenced the Kendo UI chat, you can utilize the [full capabilities of its API](http://docs.telerik.com/kendo-ui/api/javascript/ui/chat).
14+
15+
The following table lists the methods of the client-side **RadChat** object:
16+
17+
| **Name** | **Parameters** | **Return Type** | **Description** |
18+
| ------ | ------ | ------ | ------ |
19+
| **get_element** |none|HTMLElement|Returns the HTML element rendered for the control.|
20+
| **get_kendoWidget** |none|[Kendo Chat](https://docs.telerik.com/kendo-ui/api/javascript/ui/chat)|Returns a reference to the underlying Kendo UI Chat widget. See **Example 1**.|
21+
| **get_messages** |none|object| Gets the [Messages property](https://docs.telerik.com/kendo-ui/api/javascript/ui/chat/configuration/messages) of the underlying Kendo UI Chat widget.|
22+
| **get_user** |none|object|Gets the [User property](https://docs.telerik.com/kendo-ui/api/javascript/ui/chat/configuration/user) of the underlying Kendo UI Chat widget.|
23+
| **postMessage** |string|none|Triggers the post event with the message passed as a parameter, and also renders it inside the control. See **Example 2**.|
24+
| **renderAttachments** |object,object|none|Renders an attachment inside the chat by calling the [renderAttachments](https://docs.telerik.com/kendo-ui/api/javascript/ui/chat/methods/renderattachments) method of the underlying Kendo UI Chat widget. The attachments are rendered through a predefined or custom template, registered with the RadChat control. First parameter is the attachment, the second parameter is the sender. See **Example 3**. To render an attachment with a custom template see [Custom Templates]({%slug chat/functionality/templates%}).|
25+
| **renderMessage** |object,object|none|Renders a message bubble inside the chat by calling the [renderMessage](https://docs.telerik.com/kendo-ui/api/javascript/ui/chat/methods/rendermessage) method of the underlying Kendo UI Chat widget. First parameter is the message, the second parameter is the sender. See **Example 4**.|
26+
| **renderSuggestedActions** |Array|none|Renders an array of suggested actions inside the chat by calling the [renderSuggestedActions](https://docs.telerik.com/kendo-ui/api/javascript/ui/chat/methods/rendersuggestedactions) method of the underlying Kendo UI Chat widget. See **Example 5**.|
27+
28+
>caption Example 1: Get a reference to the underlying Kendo UI Chat widget.
29+
````JavaScript
30+
var radchat = $find("<%= RadChat1.ClientID %>");
31+
var kendochat = radchat.get_kendoWidget();
32+
````
33+
34+
>caption Example 2: Trigger post event and render a message.
35+
````JavaScript
36+
var chat = $find("<%= RadChat1.ClientID %>");
37+
chat.postMessage("Hello!");
38+
````
39+
40+
>caption Example 3: Render an attachment inside the chat.
41+
````JavaScript
42+
var chat = $find("<%= RadChat1.ClientID %>");
43+
chat.renderAttachments({
44+
attachments: [{
45+
contentType: "heroCard",
46+
content: {
47+
title: "Attachment Title",
48+
subtitle: "Attachment Subtitle",
49+
text: "Sample text"
50+
}
51+
}],
52+
attachmentLayout: "carousel"
53+
}, chat.get_user());
54+
````
55+
56+
>caption Example 4: Renders a message bubble inside the chat.
57+
````JavaScript
58+
var chat = $find("<%= RadChat1.ClientID %>");
59+
chat.renderMessage({
60+
type: "text",
61+
text: "Hello Kendo Chat"
62+
}, {
63+
id: kendo.guid(),
64+
name: "Sample User",
65+
iconUrl: "https://demos.telerik.com/kendo-ui/content/web/chat/avatar.png"
66+
});
67+
````
68+
69+
>caption Example 5: Renders an array of suggested actions inside the chat.
70+
````JavaScript
71+
var chat = $find("<%= RadChat1.ClientID %>");
72+
chat.renderSuggestedActions([{
73+
title: "Option 1",
74+
value: "Value 1"
75+
}, {
76+
title: "Option 2",
77+
value: "Value 2"
78+
}]);
79+
````
80+
81+
# See Also
82+
83+
* [Kendo UI Chat API](http://docs.telerik.com/kendo-ui/api/javascript/ui/chat)
84+
85+
* [Client-side programming Overview]({%slug chat/client-side-programming/overview%})
86+
87+
* [Client-side events Overview]({%slug chat/client-side-programming/events%})
88+

‎controls/chat/client-side-programming/overview.md‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,13 +14,21 @@ The **RadChat** control is built on top of the [Kendo UI Chat](http://demos.tele
1414

1515
## Getting the RadChat Client-side Object
1616

17-
**RadChat** creates a client-side object, which can be referred via the **ClientID** of the control and the **$find** function. Then, you can access the actual object that exposes the API of the Kendo UI chat through the **get_kendoWidget** method of **RadChat**'s client-side object.
17+
**RadChat** creates a client-side object, which can be referred via the **ClientID** of the control and the **$find** function. Then, you can access the actual object that exposes the API of the Kendo UI chat through the **get_kendoWidget** method of **RadChat**'s client-side object as shown in **Example 1**.
1818

1919
When you have referenced the Kendo UI chat, you can utilize the [full capabilities of its API](http://docs.telerik.com/kendo-ui/api/javascript/ui/chat).
2020

21+
>caption Example 1: Get a reference to the underlying Kendo UI Chat widget.
22+
````JavaScript
23+
var radchat = $find("<%= RadChat1.ClientID %>");
24+
var kendochat = radchat.get_kendoWidget();
25+
````
2126

27+
# See Also
2228

29+
* [Kendo UI Chat API](http://docs.telerik.com/kendo-ui/api/javascript/ui/chat)
2330

24-
# See Also
31+
* [RadChat Client-side Object]({%slug chat/client-side-programming/objects/radchat%})
32+
33+
* [Client-side events Overview]({%slug chat/client-side-programming/events%})
2534

26-
* [Kendo UI Chat API](http://docs.telerik.com/kendo-ui/api/javascript/ui/chat)

0 commit comments

Comments
 (0)