referencedMessageClick
Fired when the user clicks a pinned message banner or a reply reference.
The event payload contains only { id } for both pinned-banner clicks and reply-reference clicks.
In endless scrolling mode, the event fires before the Chat attempts to render and scroll to a referenced message that is outside the current batch.
The event handler function context (available via the this keyword) will be set to the widget instance.
Event Data
e.id String|Number
The id of the referenced message.
e.sender kendo.ui.Chat
The widget instance which fired the event.
Example - subscribe to the "referencedMessageClick" event during initialization
<div id="chat"></div>
<script>
var messages = [];
for (var i = 1; i <= 24; i++) {
var isCustomer = i % 2 === 0;
messages.push({
id: i,
authorId: isCustomer ? "customer" : "agent",
authorName: isCustomer ? "Avery Cole" : "Returns Desk",
authorImageUrl: isCustomer ? "https://demos.telerik.com/kendo-ui/content/web/Customers/LONEP.jpg" : "https://demos.telerik.com/kendo-ui/content/web/Customers/RICSU.jpg",
text: isCustomer ? "I am reviewing return request update " + i + "." : "Return request update " + i + " is available.",
timestamp: new Date(2026, 0, 12, 11, i)
});
}
messages[3].isPinned = true;
messages[3].text = "Return label RL-2048 was issued at 11:04 AM and remains the active pinned update.";
messages[22].replyToId = messages[3].id;
messages[22].text = "Can you confirm whether return label RL-2048 is still valid for pickup tomorrow?";
var dataSource = new kendo.data.DataSource({
data: messages,
pageSize: 8
});
$("#chat").kendoChat({
authorId: "customer",
dataSource: dataSource,
height: 500,
scrollMode: "endless",
referencedMessageClick: function(e) {
/* The result can be observed in the DevTools(F12) console of the browser. */
console.log(e.id);
}
});
</script>Example - subscribe to the "referencedMessageClick" event after initialization
<div id="chat"></div>
<script>
var messages = [];
for (var i = 1; i <= 24; i++) {
var isCustomer = i % 2 === 0;
messages.push({
id: i,
authorId: isCustomer ? "customer" : "agent",
authorName: isCustomer ? "Avery Cole" : "Returns Desk",
authorImageUrl: isCustomer ? "https://demos.telerik.com/kendo-ui/content/web/Customers/LONEP.jpg" : "https://demos.telerik.com/kendo-ui/content/web/Customers/RICSU.jpg",
text: isCustomer ? "I am reviewing return request update " + i + "." : "Return request update " + i + " is available.",
timestamp: new Date(2026, 0, 12, 12, i)
});
}
messages[3].isPinned = true;
messages[3].text = "Return label RL-2048 was issued at 12:04 PM and remains the active pinned update.";
messages[22].replyToId = messages[3].id;
messages[22].text = "Can you confirm whether return label RL-2048 is still valid for pickup tomorrow?";
var dataSource = new kendo.data.DataSource({
data: messages,
pageSize: 8
});
$("#chat").kendoChat({
authorId: "customer",
dataSource: dataSource,
height: 500,
scrollMode: "endless"
});
var chat = $("#chat").data("kendoChat");
chat.bind("referencedMessageClick", function(e) {
/* The result can be observed in the DevTools(F12) console of the browser. */
console.log(e.id);
});
</script>