messageActionsArray
Defines the collection of actions that will be rendered in the context menu for messages. By default, the Chat includes four actions: Reply, Copy, and Pin. You can customize this list by providing your own actions or combining default actions with custom ones.
Default actions:
{ name: "reply", text: "Reply", icon: "undo" }{ name: "copy", text: "Copy", icon: "copy" }{ name: "pin", text: "Pin", icon: "pin" }{ name: "delete", text: "Delete", icon: "trash" }
Example - Using default actions
<div id="chat"></div>
<script>
let messagesData = [
{
id: 1,
text: "This message can be replied to, copied, pinned, or deleted",
authorId: "user1",
authorName: "John Doe",
authorImageUrl: "https://demos.telerik.com/kendo-ui/content/web/Customers/RICSU.jpg",
timestamp: new Date(2026, 0, 1, 9, 0)
},
{
id: 2,
text: "Right-click on messages to see the context menu",
authorId: "user2",
authorName: "Jane Smith",
authorImageUrl: "https://demos.telerik.com/kendo-ui/content/web/Customers/LONEP.jpg",
timestamp: new Date(2026, 0, 1, 9, 5)
}
];
$("#chat").kendoChat({
// Uses default context menu actions
authorId: "user1",
dataSource: messagesData
});
</script>Example - Custom actions with some defaults
<div id="chat"></div>
<script>
let messagesData = [
{
id: 1,
text: "This message has custom context menu actions",
authorId: "user1",
authorName: "John Doe",
authorImageUrl: "https://demos.telerik.com/kendo-ui/content/web/Customers/RICSU.jpg",
timestamp: new Date(2026, 0, 1, 9, 0)
},
{
id: 2,
text: "Try right-clicking to see the custom menu",
authorId: "user2",
authorName: "Jane Smith",
authorImageUrl: "https://demos.telerik.com/kendo-ui/content/web/Customers/LONEP.jpg",
timestamp: new Date(2026, 0, 1, 9, 5)
}
];
$("#chat").kendoChat({
messageActions: [
{ name: "reply", text: "Reply", icon: "undo" }, // Default action
{ name: "copy", text: "Copy", icon: "copy" }, // Default action
{ name: "forward", text: "Forward", icon: "share" } // Custom action
],
authorId: "user1",
dataSource: messagesData,
contextMenuAction: function(e) {
console.log(e);
}
});
</script>In this article