New to Kendo UI for jQuery? Start a free 30-day trial

MessageStatusSettings

configuration

Custom settings for message status display, allowing you to configure icons, text, and CSS classes for each message delivery status. The object should be a mapping from status values ("sent", "delivered", "seen", "failed") to settings objects.

Each status settings object accepts:

icon - String - Font icon name to display.
text - String - Text label for the status.
cssClass - String - Additional CSS class to apply to the status element.

messageStatusSettings

Object

Default: null

<div id="chat"></div>
<script>
let messagesData = [
    {
        id: 1,
        text: "Sent message",
        authorId: "user1",
        authorName: "John Doe",
        timestamp: new Date(2026, 0, 1, 9, 0),
        status: "sent"
    },
    {
        id: 2,
        text: "Delivered message",
        authorId: "user1",
        authorName: "John Doe",
        timestamp: new Date(2026, 0, 1, 9, 1),
        status: "delivered"
    },
    {
        id: 3,
        text: "Seen message",
        authorId: "user1",
        authorName: "John Doe",
        timestamp: new Date(2026, 0, 1, 9, 2),
        status: "seen"
    }
];

$("#chat").kendoChat({
    messageStatusSettings: {
        sent: { icon: "check", text: "Sent" },
        delivered: { icon: "check-circle", text: "Delivered" },
        seen: { icon: "eye", text: "Seen", cssClass: "k-text-primary" },
        failed: { icon: "x-circle", text: "Failed", cssClass: "k-text-error" }
    },
    authorId: "user1",
    dataSource: messagesData
});
</script>