ReferencedMessageClick

<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>

<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>