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:
-
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();
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>