New to Telerik UI for ASP.NET AJAX? Download 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:

Name Parameters Return Type Description
get_element none HTMLElement Returns the HTML element rendered for the control.
get_kendoWidget none Kendo Chat Returns a reference to the underlying Kendo UI Chat widget. See Example 1.
get_messages none object Gets the Messages property of the underlying Kendo UI Chat widget.
get_user none object Gets the User property of the underlying Kendo UI Chat widget.
postMessage string none Triggers the post event with the message passed as a parameter, and also renders it inside the control. See Example 2.
renderAttachments object,object none Renders 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.
renderMessage object,object none Renders 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.
renderSuggestedActions Array none Renders 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.

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

Example 2: Trigger post event and render a message.

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

Example 3: Render an attachment inside the chat.

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.

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.

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

See Also

In this article