messageTemplateFunction
The template used to render individual messages. When set, it is used for both author and receiver messages unless overridden by authorMessageSettings.messageTemplate or receiverMessageSettings.messageTemplate.
The function receives message, replyMessage, downloadAll, messages, expandable, messageTimeFormat, skipSanitization, and statusTemplate.
Example
<div id="chat"></div>
<script>
let messagesData = [
{
id: 1,
text: "This message uses a custom template that shows time in HH:mm format.",
authorId: "user1",
authorName: "John Doe",
authorImageUrl: "https://demos.telerik.com/kendo-ui/content/web/Customers/RICSU.jpg",
timestamp: new Date(2026, 0, 1, 9, 30)
},
{
id: 2,
text: "The custom template makes each message look different!",
authorId: "user2",
authorName: "Jane Smith",
authorImageUrl: "https://demos.telerik.com/kendo-ui/content/web/Customers/LONEP.jpg",
timestamp: new Date(2026, 0, 1, 10, 15)
}
];
$("#chat").kendoChat({
messageTemplate: function(message, replyMessage, downloadAll, messages, expandable, messageTimeFormat, skipSanitization, statusTemplate) {
return "<div class='custom-message'>" +
"<div class='custom-message-text'>" + kendo.htmlEncode(message.text) + "</div>" +
"<div class='custom-message-time'>" + kendo.toString(message.timestamp, "HH:mm") + "</div>" +
"</div>";
},
authorId: "user1",
dataSource: messagesData
});
</script>