Introduction
Contribution
Knowledge Base
Chat

dataSourceObject|Array|kendo.data.DataSource

The data source configuration or instance that contains the Chat messages. The data source should contain message objects with fields for text, author information, timestamps, and other message properties.

Example 

<div id="chat"></div>
<script>
let messagesData = [
    {
        id: 1,
        text: "Welcome to our chat!",
        authorId: "admin",
        authorName: "Chat Admin",
        authorImageUrl: "https://demos.telerik.com/kendo-ui/content/web/Customers/RICSU.jpg",
        timestamp: new Date(2026, 0, 1, 9, 0),
        isPinned: true
    },
    {
        id: 2,
        text: "Thank you! Excited to be here.",
        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)
    },
    {
        id: 3,
        text: "Here's a document with more information:",
        authorId: "admin",
        authorName: "Chat Admin",
        authorImageUrl: "https://demos.telerik.com/kendo-ui/content/web/Customers/RICSU.jpg",
        files: [{ name: "welcome_guide.pdf", size: 234567, extension: "pdf" }],
        timestamp: new Date(2026, 0, 1, 9, 10)
    }
];

$("#chat").kendoChat({
    authorId: "user2",
    dataSource: messagesData
});
</script>
In this article
dataSource
Not finding the help you need?
Contact Support