Edit this page

Custom Components

The RadChat control supports the implementation of custom components which allows you to use JavaScript to render any content in the chat flow. For example, you can use the Kendo UI Calendar widget to facilitate the user to choose a date.

To use the custom components you should first register them via the kendo.chat.registerComponent(componentName, component); method and then set the component name as a value to the contentType property of the attachment. Below you can find a sample implementaction of a CalendarComponent and how to use it.

Figure 1: A Chat renders a Kendo UI Calendar to facilitate date choosing.

chat with custom components

 <%-- load Kendo UI styles needed for the Kendo UI Calendar --%>
<link rel="stylesheet" href="~/styles/kendo.common.min.css" />
<link rel="stylesheet" href="~/styles/kendo.default.min.css" />
<style>
    html .t-card {
        max-width: none;
    }
</style>
<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
    <Scripts>
        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
    </Scripts>
</telerik:RadScriptManager>
 <%-- load Kendo UI scripts needed for the Kendo UI Calendar after the ScriptManager and before RadChat --%>
<script src="~/scripts/kendo.all.min.js"></script>
<telerik:RadChat runat="server" ID="RadChat1" Width="400px" Height="550px">
    <ClientEvents OnLoad="OnLoad" />
</telerik:RadChat>
function OnLoad(sender) {
    var chat = sender;

    chat.postMessage("Hello!");
    chat.postMessage("Please, select a date from the Calendar.");

    chat.renderAttachments({
        attachments: [{
            contentType: "CalendarComponent",
            content: {
                value: new Date()
            }
        }]
    }, chat.get_user());
}
// register the CalendarComponent containing the Kendo UI Calendar widget
var CalendarComponent = kendo.chat.Component.extend({
    init: function (options, view) {
        kendo.chat.Component.fn.init.call(this, options, view);

        // Create a <div> from which the Calendar will be initialized
        var calendarElement = $('<div>');

        // Initialize the Calendar widget passing the provided value
        calendarElement.kendoCalendar({
            value: options.value,
            // Implement the logic to be executed
            // when the user selects a date
            change: function (e) {
                var chat = $telerik.$(this.element).closest(".RadChat")[0].control;
                chat.postMessage('You have selected ' + kendo.toString(e.sender.value(), 'D') + '!');

                var element = e.sender.element.closest('.t-card-container');

                setTimeout(function () {
                    e.sender.destroy();
                    element.remove();
                });
            }
        });

        // Place the calendar within the Chat Card
        var bodyElement = $('<div>').addClass("t-card-body").append(calendarElement);
        this.element.addClass("t-card").append(bodyElement);
    }
});

kendo.chat.registerComponent("CalendarComponent", CalendarComponent);

See Also

Is this article helpful? No Yes
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy