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

jQuery Chat RTL Support

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

right-to-left.html

Also available for:

const currentUser = { id: 123, name: "John Doe", iconUrl: "https://demos.telerik.com/kendo-ui/content/web/Customers/RICSU.jpg", iconAltText: "John's profile picture" }; var chat = $("#chat").kendoChat({ dir: 'rtl', allowMessageCollapse: true, suggestedActionsScrollable: true, suggestionsScrollable: true, messageWidthMode: "standard", width: 400, height: 600, headerItems: [{ type: "contentItem", template: () => "<strong>John's chat</strong>" }], fileActions: [ { name: "download", text: "Download", icon: "download" }, { name: "delete", text: "Delete", icon: "trash" }, { name: "preview", text: "Preview", icon: "eye" } ], fileMenuAction: function(e) { kendo.alert("File action executed: " + e.type); }, suggestions: [ { text: "Learn more about the company" }, { text: "No need for further assistance" } ], toolbar: { toggleable: true, buttons: [ { name: "sendimage", icon: "image" }, { name: "upload", icon: "arrow-up" } ] }, authorId: 123, dataSource: { data: [ { id: 2, authorId: 2, authorName: "Peter Smith", authorImageUrl: "https://demos.telerik.com/kendo-ui/content/web/Customers/GOURL.jpg", authorImageAltText: "Peter's profile picture", text: "Hi there! Welcome to our Careers Portal. I see you're interested in the Designer position. Could you please upload your application documents (CV, portfolio and cover letter) so we can get started? Below you will also find a CV template file", timestamp: new Date(), isPinned: true, files: [{ name: "CV.pdf", size: 5315153, extension: "pdf", url: "../content/chat/CV.pdf" }], }, ] }, sendMessage: function(e) { e.message.authorId = currentUser.id; e.message.authorName = currentUser.name; e.message.authorImageUrl = currentUser.iconUrl; e.message.authorImageAltText = currentUser.iconAltText; e.message.id = kendo.guid(); let text = ''; let file = {}; if (e.message.files.length > 0) { setTimeout(function() { e.sender.postMessage({ id: kendo.guid(), authorId: 2, authorName: "Peter Smith", authorImageUrl: "https://demos.telerik.com/kendo-ui/content/web/Customers/GOURL.jpg", authorImageAltText: "Peter's profile picture", text: "Great! Your application has been successfully submitted. Our hiring team will review your files and get back to you within 5-7 business days. In the meantime, let me know what else would you like.", timestamp: new Date() }); }, 500) } else { if (e.message.text.toLowerCase().trim() === 'learn more about the company') { text = "Thank you for your interest! To learn more about our company and the services we offer, please visit the following links: https://www.youtube.com/watch?v=VX919tM3Zck https://www.progress.com/company"; } else if (e.message.text.toLowerCase().trim() === 'no need for further assistance') { text = "Understood. Good luck with your application. I'm here if you need anything else in the future."; } else { text = "Please select a quick reply."; } setTimeout(function() { const messages = []; // Push main message messages.push({ id: kendo.guid(), authorId: 2, authorName: "Peter Smith", authorImageUrl: "https://demos.telerik.com/kendo-ui/content/web/Customers/GOURL.jpg", authorImageAltText: "Peter's profile picture", text: text, timestamp: new Date() }); // Push file message if exists if (file.hasOwnProperty('name')) { messages.push({ id: kendo.guid(), authorId: 2, authorName: "Peter Smith", authorImageUrl: "https://demos.telerik.com/kendo-ui/content/web/Customers/GOURL.jpg", authorImageAltText: "Peter's profile picture", timestamp: new Date(), files: [file] }); } sendMessagesSequentially(e.sender, messages); }, 200) } } }).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(); }); function delay(ms) { return new Promise(resolve => setTimeout(resolve, ms)); } async function sendMessagesSequentially(sender, messages) { for (const msg of messages) { sender.postMessage(msg); await delay(300); // Adjust delay as needed } }

Description

Right-to-Left (RTL) support represents the ability of a library, website, or application to handle and respond to users who communicate through right-to-left languages. Right-to-left languages are Arabic, Hebrew, Chinese, Japanese, and others.

The default language input for web users can be left-to-right or right-to-left. The Kendo UI for jQuery Chat supports both input modes enabling you to properly render a spectrum of languages, including Hebrew, Chinese, and Arabic, thus making your app a truly global one and helping your localization efforts.

The Telerik UI for Kendo UI for jQuery Chat component comes with built-in right-to-left (RTL) support and offers right-to-left rendering.

This demo shows how to set the RTL functionality of the Chat component by specifying k-rtl in the div class.

Support & Learning Resources

Additional Resources