jQuery Chat Data Binding

Loading Demo...

EXAMPLE
VIEW SOURCE
Edit in Kendo UI Dojo
Change Theme
default
Default Theme

Main

Main Dark

Nordic

Ocean Blue

Ocean Blue A11Y

Purple

Turquoise
Bootstrap Theme

Main

Bootstrap 3

Bootstrap 3 Dark

Main Dark

Nordic

Turquoise

Turquoise Dark

Urban

Vintage
Material Theme

Main

Arctic

Lime Dark

Main Dark

Material 2

Material 2 Dark

Nova
Classic Theme

Main

Green

Green Dark

Lavender

Lavender Dark

Main Dark

Metro

Metro Dark

Moonlight

Opal

Opal Dark

Silver

Silver Dark

Uniform
Fluent Theme

Main

Main Dark
Launch Theme Builder

Also available for:

var notificationWidget = $("#notification").kendoNotification({ templates: [{ type: "fileNote", template: '<span class="download-icon"></span> File downloaded', }, { type: "copyNotification", template: '<span class="copy-icon"></span> Message copied to clipboard.', }], width: 160, height: 54, appendTo: "#container" }).data("kendoNotification"); var chat = $("#chat").kendoChat({ width: 400, height: 600, fileActions: [{ name: "download", text: "Download", icon: "download" }, { name: "share", text: "Share", icon: "share" }], fileMenuAction: function(e) { notificationWidget.show("File menu action selected: " + e.type ); }, download: function(e) { notificationWidget.show("File download action selected"); }, authorId: 1, authorName: "Lora", dataSource: { data: [ { id: 1, authorId: 1, authorName: "Lora", authorImageUrl: "https://demos.telerik.com/kendo-ui/content/web/Customers/ANATR.jpg", authorImageAltText: "Lora's profile picture", text: "Hey Emma! I just booked my trip to Japan for next month! I'm so excited but also a bit nervous since it's my first time there. Any tips?", timestamp: new Date(2025, 7, 20, 14, 30), isPinned: true }, { id: 4, authorId: 2, authorName: "Emma", authorImageUrl: "https://demos.telerik.com/kendo-ui/content/web/Customers/DUMON.jpg", authorImageAltText: "Emma's profile picture", text: "Don't miss the cherry blossoms if they're still blooming! And try the street food in Osaka - it's the best!", timestamp: new Date(2025, 7, 20, 14, 42), }, { id: 5, authorId: 1, authorName: "Lora", authorImageUrl: "https://demos.telerik.com/kendo-ui/content/web/Customers/ANATR.jpg", authorImageAltText: "Lora's profile picture", text: "Perfect! I'm definitely going during cherry blossom season. Should I book accommodations in advance, or can I find places as I go?", timestamp: new Date(2025, 7, 20, 14, 45), }, { id: 6, authorId: 2, authorName: "Emma", authorImageUrl: "https://demos.telerik.com/kendo-ui/content/web/Customers/DUMON.jpg", authorImageAltText: "Emma's profile picture", text: "Definitely book in advance, especially during cherry blossom season! It gets super busy. I recommend staying in a ryokan in Kyoto for the traditional experience. Here you will find the scheduler we have used when we were there.", timestamp: new Date(2025, 7, 20, 14, 48), files: [ { name: "Sightseeing_schedule.pdf", size: 245760, extension: "pdf" }, { name: "Favourite_place.jpg", size: 156000, extension: "jpg" } ], }, { id: 7, authorId: 1, authorName: "Lora", authorImageUrl: "https://demos.telerik.com/kendo-ui/content/web/Customers/ANATR.jpg", authorImageAltText: "Lora's profile picture", text: "Thanks for all the advice, Emma. I'll definitely send you photos!", timestamp: new Date(2025, 7, 20, 14, 52), }, ] }, sendMessage: function(e) { e.message.authorId = 1; e.message.authorName = "Lora"; e.message.authorImageUrl = "https://demos.telerik.com/kendo-ui/content/web/Customers/ANATR.jpg"; e.message.authorImageAltText = "Lora's profile picture"; e.message.id = kendo.guid(); } }).data("kendoChat"); chat.messageBox.uploadInstance.bind("select", function(e) { let files = e.files; files.forEach(function(file) { if (file.extension !== '.jpg' && file.extension !== '.pdf') { kendo.alert('The allowed files types are "pdf" and "jpg"') e.preventDefault(); chat.messageBox._files = chat.messageBox._files.filter(f => f !== file); } }); chat.messageBox.updateAttachmentList(); }); .k-notification { position: absolute; z-index: 9999; top: 90%; left: 50%; transform: translate(-50%, -50%); }

Description

The Kendo UI for jQuery Chat supports local and remote data binding that allows you to load messages from a local collection or specify a remote endpoint that returns the underlying data.

The current demo demonstrates how the Chat component can be bound to local dataset that is passed to the the dataSource.

This Chat example is part of a unique collection of hundreds of jQuery demos, with which you can see all Kendo UI for jQuery components and their features in action. View the source code of the demos from the library or directly adapt, and edit them and their theme appearance in Kendo UI for jQuery Dojo or ThemeBuilder.

Additional Resources