New to Telerik UI for ASP.NET AJAXStart a free 30-day trial

RadChat Object

The RadChat control is built on top of the Kendo UI Chat. 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.

The following table lists the methods of the client-side RadChat object:

NameParametersReturn TypeDescription
get_elementnoneHTMLElementReturns the HTML element rendered for the control.
get_kendoWidgetnoneKendo ChatReturns a reference to the underlying Kendo UI Chat widget. See Example 1.
get_messagesnoneobjectGets the Messages property of the underlying Kendo UI Chat widget.
get_usernoneobjectGets the User property of the underlying Kendo UI Chat widget.
postMessagestringnoneTriggers the post event with the message passed as a parameter, and also renders it inside the control. See Example 2.
renderAttachmentsobject,objectnoneRenders an attachment inside the chat by calling the 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.
renderMessageobject,objectnoneRenders a message bubble inside the chat by calling the renderMessage method of the underlying Kendo UI Chat widget. First parameter is the message, the second parameter is the sender. See Example 4.
renderSuggestedActionsArraynoneRenders an array of suggested actions inside the chat by calling the renderSuggestedActions method of the underlying Kendo UI Chat widget. See Example 5.

Example 1: Get a reference to the underlying Kendo UI Chat widget.

JavaScript
var radchat = $find("<%= RadChat1.ClientID %>");
var kendochat = radchat.get_kendoWidget();

Example 2: Trigger post event and render a message.

JavaScript
var chat = $find("<%= RadChat1.ClientID %>");
chat.postMessage("Hello!");

Example 3: Render an attachment inside the chat.

JavaScript
var chat = $find("<%= RadChat1.ClientID %>");
chat.renderAttachments({
    attachments: [{
        contentType: "heroCard",
        content: {
            title: "Attachment Title",
            subtitle: "Attachment Subtitle",
            text: "Sample text"
        }
    }],
    attachmentLayout: "carousel"
}, chat.get_user());

Example 4: Renders a message bubble inside the chat.

JavaScript
var chat = $find("<%= RadChat1.ClientID %>");
chat.renderMessage({
    type: "text",
    text: "Hello Kendo Chat"
}, {
    id: kendo.guid(),
    name: "Sample User",
    iconUrl: "https://demos.telerik.com/kendo-ui/content/web/chat/avatar.png"
});

Example 5: Renders an array of suggested actions inside the chat.

JavaScript
var chat = $find("<%= RadChat1.ClientID %>");
chat.renderSuggestedActions([{
    title: "Option 1",
    value: "Value 1"
}, {
    title: "Option 2",
    value: "Value 2"
}]);

See Also

In this article
See Also
Not finding the help you need?
Contact Support