Your search did not match any results.

Chat - Customization

Use the following properties to customize the DevExtreme Chat component:

Backend API
@model DevExtreme.MVC.Demos.ViewModels.ChatViewModel @{ var dayHeaderFormats = new[] { "dd/MM/yyyy", "dd.MM.yyyy", "MMMM dd, yyyy", "EEEE, MMMM dd" }; var messageTimestampFormats = new [] { "hh:mm a", "hh:mm:ss a", "HH:mm", "HH:mm:ss" }; } <div class="chat-container"> @(Html.DevExtreme().Chat() .ID("chat") .Height(710) .User(user => user .Id(Model.CurrentUser.Id) .Name(Model.CurrentUser.Name) ) .DataSource(Model.Messages) .ReloadOnChange(false) .OnMessageEntered("onMessageEntered") .DayHeaderFormat(dayHeaderFormats[0]) .MessageTimestampFormat(messageTimestampFormats[0]) .OnInitialized("chatInitialized") ) </div> <div class="options"> <div class="caption">Options</div> <div class="option"> @(Html.DevExtreme().CheckBox() .Value(true) .Text("Avatar") .OnValueChanged("showAvatarValueChanged") ) </div> <div class="option"> @(Html.DevExtreme().CheckBox() .Value(true) .Text("User Name") .OnValueChanged("showUserNameValueChanged") ) </div> <div class="option-separator"></div> <div class="option"> @(Html.DevExtreme().CheckBox() .Value(true) .Text("Day Headers") .OnValueChanged("showDayHeadersValueChanged") ) </div> <div class="option"> <span>Day Header Format:</span> @(Html.DevExtreme().SelectBox() .DataSource(dayHeaderFormats) .Value(dayHeaderFormats[0]) .InputAttr("aria-label", "Day Header Format") .OnValueChanged("dayHeaderFormatValueChanged") ) </div> <div class="option-separator"></div> <div class="option"> @(Html.DevExtreme().CheckBox() .Value(true) .Text("Message Timestamp") .OnValueChanged("showMessageTimestampValueChanged") ) </div> <div class="option"> <span>Message Timestamp Format:</span> @(Html.DevExtreme().SelectBox() .DataSource(messageTimestampFormats) .Value(messageTimestampFormats[0]) .InputAttr("aria-label", "Message Timestamp Format") .OnValueChanged("messageTimestampFormatValueChanged") ) </div> <div class="option-separator"></div> <div class="option"> @(Html.DevExtreme().CheckBox() .Value(false) .Text("Disable Chat") .OnValueChanged("disabledValueChanged") ) </div> </div> <script> var userChat, supportChat; function chatInitialized({ component }) { chat = component; } function onMessageEntered({ message }) { chat.renderMessage(message); } function showAvatarValueChanged(data) { chat.option("showAvatar", data.value); } function showUserNameValueChanged(data) { chat.option("showUserName", data.value); } function showDayHeadersValueChanged(data) { chat.option("showDayHeaders", data.value); } function dayHeaderFormatValueChanged(data) { chat.option("dayHeaderFormat", data.value); } function showMessageTimestampValueChanged(data) { chat.option("showMessageTimestamp", data.value); } function messageTimestampFormatValueChanged(data) { chat.option("messageTimestampFormat", data.value); } function disabledValueChanged(data) { chat.option("disabled", data.value); } </script>
using System; using System.Linq; using System.Collections.Generic; using System.Web.Mvc; using DevExtreme.MVC.Demos.Models.Chat; using DevExtreme.MVC.Demos.Models.SampleData; using DevExtreme.MVC.Demos.ViewModels; namespace DevExtreme.MVC.Demos.Controllers { public class ChatController : Controller { public ActionResult Customization() { return View(new ChatViewModel { CurrentUser = SampleData.CurrentUser, SupportAgent = SampleData.SupportAgent, Messages = SampleData.Messages, }); } } }
using DevExtreme.MVC.Demos.Models.Chat; using System; using System.Collections.Generic; namespace DevExtreme.MVC.Demos.Models.SampleData { public partial class SampleData { private static readonly DateTime todayDate = DateTime.Now.Date; private static DateTime GetTimestamp(DateTime date, int offsetMinutes = 0) { DateTime adjustedDate = date.AddMinutes(offsetMinutes); return adjustedDate; } public static ChatUser CurrentUser = new ChatUser { Id = "c94c0e76-fb49-4b9b-8f07-9f93ed93b4f3", Name = "John Doe" }; public static ChatUser SupportAgent = new ChatUser { Id = "d16d1a4c-5c67-4e20-b70e-2991c22747c3", Name = "Support Agent", AvatarUrl = "../../Content/Images/petersmith.png" }; public static readonly IEnumerable<Message> Messages = new[] { new Message { Timestamp = GetTimestamp(todayDate, -9), Author = SupportAgent, Text = "Hello, John!\nHow can I assist you today?", }, new Message { Timestamp = GetTimestamp(todayDate, -7), Author = CurrentUser, Text = "Hi, I'm having trouble accessing my account.", }, new Message { Timestamp = GetTimestamp(todayDate, -7), Author = CurrentUser, Text = "It says my password is incorrect." }, new Message { Timestamp = GetTimestamp(todayDate, -7), Author = SupportAgent, Text = "I can help you with that. Can you please confirm your UserID for security purposes?" }, new Message { Timestamp = GetTimestamp(todayDate, 1), Author = CurrentUser, Text = "john.doe1357" }, new Message { Timestamp = GetTimestamp(todayDate, 1), Author = SupportAgent, Text = "✅ Instructions to restore access have been sent to the email address associated with your account." } }; } }
using DevExtreme.MVC.Demos.Models.Chat; using System.Collections.Generic; namespace DevExtreme.MVC.Demos.ViewModels { public class ChatViewModel { public IEnumerable<Message> Messages { get; set; } public ChatUser CurrentUser { get; set; } public ChatUser SupportAgent { get; set; } } }
using System; using System.Text.Json.Serialization; namespace DevExtreme.MVC.Demos.Models.Chat { public class Message { [JsonPropertyName("id")] public string Id { get; set; } [JsonPropertyName("timestamp")] public DateTime Timestamp { get; set; } [JsonPropertyName("author")] public ChatUser Author { get; set; } [JsonPropertyName("text")] public string Text { get; set; } [JsonPropertyName("isDeleted")] public Boolean IsDeleted { get; set; } [JsonPropertyName("isEdited")] public Boolean IsEdited { get; set; } } }
using System.Text.Json.Serialization; namespace DevExtreme.MVC.Demos.Models.Chat { public class ChatUser { [JsonPropertyName("id")] public string Id { get; set; } [JsonPropertyName("name")] public string Name { get; set; } [JsonPropertyName("avatarUrl")] public string AvatarUrl { get; set; } } }
.demo-container { min-width: 720px; display: flex; gap: 20px; } .chat-container { display: flex; flex-grow: 1; align-items: center; justify-content: center; } .options { padding: 20px; display: flex; flex-direction: column; min-width: 280px; background-color: rgba(191, 191, 191, 0.15); gap: 16px; } .dx-chat { max-width: 480px; } .caption { font-size: var(--dx-font-size-sm); font-weight: 500; } .option-separator { border-bottom: 1px solid var(--dx-color-border); } .dx-avatar { border: 1px solid var(--dx-color-border); }