Clearing All Messages in Kendo UI Chat

Environment

Product	Chat for Progress® Kendo UI®
Version	2024.4.1112

Description

In scenarios where you need to clear all messages in the Chat widget and allow the user to start a new conversation, for instance, you can remove the content as described below.

Solution

To clear all messages from the Chat widget, you can use one of the following approaches:

1. Using jQuery to Remove Messages by Class Selector

   Directly manipulate the DOM to remove all elements with the class k-message, which is used for chat messages.

   $(".k-message").remove();
   

2. Emptying the Chat View

Access the chat instance and then empty its list view. This method does not require direct DOM manipulation.

   $("#chat").data("kendoChat").view.list.empty()

Both methods effectively clear the chat window, allowing for a fresh start. For a practical implementation, refer to example below:

<div id="chat"></div>
    <script>
      $("#chat").kendoChat({
        toolClick: function (ev) {
          if (ev.name === "Clear") {
            $(".k-message").remove();
          }else if(ev.name === "Remove"){
            ev.sender.view.list.empty()
          }
        },
        toolbar: {
          buttons: [
            { name: "Clear", iconClass: "k-icon k-i-apply-format" },
            { name: "Remove", iconClass: "k-icon k-i-trash" }
          ]
        },
        messages: {
          placeholder: "Type here..."
        }
      });

      var chat = $("#chat").data("kendoChat");


      chat.renderMessage({
        type: "text",
        text: "Hello Kendo Chat"
      }, {
        id: kendo.guid(),
        name: "Sample User",
        iconUrl: "https://demos.telerik.com/kendo-ui/content/web/avatar.png"
      });

      chat.renderMessage({
        type: "text",
        text: "Hello!"
      }, chat.getUser());

 </script>

See Also

• Kendo UI Chat Overview
• Kendo UI Chat API