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

PinnedMessages

configuration

Provides a stable root-level collection that the Chat can use for pinned-message banners when the current endless-scroll window does not contain the pinned target.

This option is most useful with scrollMode set to "endless" and a server-paged dataSource.

The Chat uses the last item in the pinnedMessages array as the active pinned banner. Each item can be a full message object or a partial object, but it must contain enough data to identify the target and render the pinned banner.

If the pinned target is not part of the current remote window, the Chat can still render the banner from pinnedMessages while using the endless endpoint to load the target batch when the banner is clicked.

pinnedMessages

Array

pseudo

        <div id="chat"></div>
        <script>
            var dataSource = new kendo.data.DataSource({
                transport: {
                    read: {
                        url: "/api/chat/messages",
                        dataType: "json"
                    }
                },
                schema: {
                    data: "data",
                    total: "total"
                },
                serverPaging: true,
                pageSize: 10
            });

            $("#chat").kendoChat({
                authorId: "customer",
                dataSource: dataSource,
                height: 520,
                scrollMode: "endless",
                pinnedMessages: [
                    {
                        id: 7,
                        authorName: "Warehouse Support",
                        text: "Order 98145 was packed and moved to the outbound lane."
                    },
                    {
                        id: 12,
                        authorName: "Warehouse Support",
                        text: "Order 98145 left the regional warehouse at 10:14 AM and is scheduled for next-day delivery.",
                        isPinned: true
                    }
                ]
            });
        </script>

PinnedMessages

pinnedMessages

pinnedMessages.authorId

pinnedMessages.authorImageAltText

pinnedMessages.authorImageUrl

pinnedMessages.authorName

pinnedMessages.id

pinnedMessages.isDeleted

pinnedMessages.isOwnMessage

pinnedMessages.isPinned

pinnedMessages.text