Controls how the Chat renders long conversations. The supported values are:

• "scrollable" - Renders the full message list.
• "endless" - Initially renders only the latest effective dataSource.pageSize() window. Scrolling near the top loads older messages, and scrolling near the bottom while a historical batch is active loads newer messages.

With local data, the Chat uses the bound DataSource page size for the initial latest window and for each adjacent history load. If the bound DataSource does not expose a valid page size, the Chat seeds the DataSource with the default endless batch size of 20 before the first endless load. With a server-paged data source, remote endless mode uses a Chat-specific server contract:

• The startup latest request sends pageSize and intent: "latest" and omits startIndex and endIndex.
• Older and newer requests send explicit startIndex, endIndex, and pageSize values, where startIndex is zero-based and inclusive and endIndex is exclusive.
• Jump requests send targetMessageId and pageSize without explicit startIndex and endIndex, and the server chooses the returned frame.
• Default DataSource paging parameters such as page, skip, and take may still appear on the wire and must be ignored by the endless endpoint.

Warning: Every remote endless response must return total, startIndex, and endIndex. The returned item count must equal endIndex - startIndex, and the latest window is the one where endIndex === total.

Off-batch pinned banners can use pinnedMessages. Off-batch reply previews require referenceResolver.

In remote endless mode (scrollMode: "endless" with a server-paged dataSource), autoBind: false, manual dataSource.read(), and manual dataSource.fetch() are not supported.

To use endless scrolling, set scrollMode to "endless" and set a fixed height on the Chat.

Example - enable endless scrolling for a long conversation

<div id="chat"></div>
<script>
var messages = [];

for (var i = 1; i <= 36; i++) {
    var isCustomer = i % 2 === 0;

    messages.push({
        id: i,
        authorId: isCustomer ? "customer" : "agent",
        authorName: isCustomer ? "Taylor Reed" : "Support 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 order update " + i + "." : "Support timeline update " + i + " is ready.",
        timestamp: new Date(2026, 0, 10, 8, i)
    });
}

var dataSource = new kendo.data.DataSource({
    data: messages,
    pageSize: 10
});

$("#chat").kendoChat({
    authorId: "customer",
    dataSource: dataSource,
    height: 500,
    scrollMode: "endless"
});
</script>