Edit this page

Chat HtmlHelper Overview

The Chat HtmlHelper extension is a server-side wrapper for the Kendo UI Chat widget.

The Chat widget allows the user to participate in chat sessions with other users or with chat bots. The widget provides support for default cards and actions, and enables the configuration of custom templates and custom components.

For more information on new Chat features, refer to the Kendo UI Roadmap.

Getting Started

Create the Chat

The following example demonstrates how to use the HtmlHelper declaration to create a Chat widget with its name and id set to "chat".

Example
    @(Html.Kendo().Chat()
        .Name("chat")
    )
    <%: Html.Kendo().Chat()
        .Name("chat")
    %>

Event Handling

You can subscribe to all Chat events either by a handler name or by a template delegate.

By Handler Name

The following example demonstrates how to subscribe to events by a handler name.

Example
    @(Html.Kendo().Chat()
        .Name("chat")
        .Events(e => e
            .Post("onPost")
            .SendMessage("onSendPessage")
        )
    )

    <script>
      function onPost() {
        //Handle the post event.
      }

      function onSendPessage() {
        //Handle the sendMessage event.
      }
    </script>
    <%: Html.Kendo().Chat()
        .Name("chat")
        .Events(e => e
            .Post("onPost")
            .SendMessage("onSendPessage")
        )
    %>

    <script>
      function onPost() {
        //Handle the post event.
      }

      function onSendPessage() {
        //Handle the sendMessage event.
      }
    </script>

By Template Delegate

The following example demonstrates how to subscribe to events by a template delegate.

Example
    @(Html.Kendo().Chat(Model)
        .Name("chat")
        .Events(e => e
            .Post(@<text>
                function() {
                  //Handle the post event inline.
                }
            </text>)
            .SendMessage(@<text>
                function() {
                  //Handle the sendMessage event inline.
                }
            </text>)
        )
    )

Reference

Existing Instances

To reference an existing Kendo UI Chat instance, use the jQuery.data() method call. Once a reference is established, use the Chat API to control its behavior.

Example
//Put this after your Kendo UI Chat for ASP.NET MVC declaration.
<script>
  $(function() {
      //Notice that the Name() of the Chat is used to get its client-side instance.
      var chat = $("#chat").data("kendoChat");
  });
</script>

See Also