New to Telerik UI for ASP.NET MVC? Start a free 30-day trial

Remote Binding

The Chat supports remote data binding that enables you to load messages through a remote endpoint.

For a runnable example, refer to the demo on binding the Chat to remote data.

Field Mapping

When the Chat is configured for remote data binding, you must specify the following field mapping options in the Chat configuration to map Model properties to DataSource fields:

TextField()—Maps to the message text content.
AuthorNameField()—Maps to the author's display name.
AuthorIdField()—Maps to the author's unique identifier.
AuthorImageUrlField()—Maps to the author's profile image URL.
AuthorImageAltTextField()—Maps to the alternative text for the author's image.
TimestampField()—Maps to the message timestamp.
IdField()—Maps to the unique message identifier.
FilesField()—Maps to attached files.
IsDeletedField()—Maps to the deleted status of the message.
IsTypingField()—Maps to the typing indicator status.
IsPinnedField()—Maps to the pinned indicator status.

Ajax Data Binding

To configure the Chat for Ajax data binding, follow these steps:

Create a controller action that returns the chat messages when the DataSource triggers a Read request.

C#
public JsonResult GetMessages()
{
    // Populate the "data" collection with data.
    var data = new List<ChatMessage>();

    return Json(new DataSourceResult
    {
        Data = data.Select(message => new
        {
            message.Id,
            message.AuthorId,
            message.AuthorName,
            message.AuthorImageUrl,
            message.AuthorImageAltText,
            message.Text,
            message.TimeStamp,
            message.IsDeleted,
            message.IsPinned,
            message.IsTyping,
            Files = message.Files.Select(file => new
            {
                extension = file.Extension,
                size = file.Size,
                type = file.Type,
                name = file.Name
            })
        })
    });
}
C#
public class ChatMessage : IChatMessage
{
        /// <summary>
        /// The constructor that will create a <see cref="ChatMessage" /> instance.
        /// </summary>
        public ChatMessage()
        {
            Files = new List<ChatFile>();
        }

        /// <summary>
        /// The unique identifier of the message.
        /// </summary>
        public string Id { get; set; }


        /// <summary>
        /// ID of message being replied to
        /// </summary>
        public string RepliedToId { get; set; }

        /// <summary>
        /// The text of the message.
        /// </summary>
        public string Text { get; set; }

        /// <summary>
        /// The author's unique identifier.
        /// </summary>
        public string AuthorId { get; set; }

        /// <summary>
        /// The author's name.
        /// </summary>
        public string AuthorName { get; set; }

        /// <summary>
        /// The author's image.
        /// </summary>
        public string AuthorImageUrl { get; set; }

        /// <summary>
        /// The message's timestamp.
        /// </summary>
        public DateTime? TimeStamp { get; set; }

        /// <summary>
        /// The alternative text that will be displayed if no image is present.
        /// </summary>
        public string AuthorImageAltText { get; set; }

        /// <summary>
        /// The pin mode of the message.
        /// </summary>
        public bool? IsPinned { get; set; }

        /// <summary>
        /// Sets the IsTyping mode.
        /// </summary>
        public bool? IsTyping { get; set; }

        /// <summary>
        /// Sets the IsDeleted mode.
        /// </summary>
        public bool? IsDeleted { get; set; }

        /// <summary>
        /// The initial files that will be set to the chat message.
        /// </summary>
        public IEnumerable<ChatFile> Files { get; set; }
}

Define actions for Create and Update operations.

    public JsonResult CreateMessage([DataSourceRequest] DataSourceRequest request, ChatMessage message)
    {
        message.Id = Guid.NewGuid().ToString();
        // Set the Message ID explicitly and perform a custom create operation to the database.
        return Json(new[] { message }.ToDataSourceResult(request));
    }

    public JsonResult UpdateMessage([DataSourceRequest] DataSourceRequest request, ChatMessage message)
    {
        // Perform a custom update operation to the existing database.
        return Json(new[] { message }.ToDataSourceResult(request));
    }

Configure the Chat with the appropriate field mappings and a DataSource.

Razor
@(Html.Kendo().Chat()
    .Name("chat")
    .Height("600px")
    .Width("400px")
    .AuthorId("1")
    .TextField("Text")
    .AuthorNameField("AuthorName")
    .FilesField("Files")
    .AuthorIdField("AuthorId")
    .AuthorImageUrlField("AuthorImageUrl")
    .AuthorImageAltTextField("AuthorImageAltTextField")
    .TimestampField("TimeStamp")
    .IdField("Id")
    .IsPinnedField("IsPinned")
    .IsDeletedField("IsDeleted")
    .IsTypingField("IsTyping")
    .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("GetMessages", "Home"))
        .Create(create => create.Action("CreateMessage", "Home"))
        .Update(update => update.Action("UpdateMessage", "Home"))
    )
    .Events(events => events.SendMessage("onSendMessage"))
)
JS
<script>
    function onSendMessage(e){
        const currentUser = {
            id: 1,
            name: "Lora",
            iconUrl: "https://demos.telerik.com/aspnet-core/shared/web/Customers/RICSU.jpg",
            iconAltText: "Lora's profile picture"
        };

        e.message.authorId = currentUser.id;
        e.message.authorName = currentUser.name;
        e.message.authorImageUrl = currentUser.iconUrl;
        e.message.authorImageAltText = currentUser.iconAltText;

        setTimeout(() => {
            e.sender.scrollToBottom();
        }, 30);
    }
</script>

Custom DataSource

Also, you can use a Custom DataSource for more advanced scenarios with schema mapping.

Razor
@(Html.Kendo().Chat()
    .Name("chat")
    .Height("600px")
    .Width("400px")
    .AuthorId("1")
    .Events(events => events.SendMessage("onSendMessage"))
    .DataSource(dataSource => dataSource
        .Custom()
        .Transport(transport => transport
            .Read("GetMessages", "Home")
            .Update("UpdateMessage", "Home")
            .Create("CreateMessage", "Home")
        )
        .Schema(schema => schema
            .Model(model => {
                model.Id("id");
                model.Field("id", typeof(string)).From("Id");
                model.Field("authorId", typeof(string)).From("AuthorId");
                model.Field("authorName", typeof(string)).From("AuthorName");
                model.Field("authorImageUrl", typeof(string)).From("AuthorImageUrl");
                model.Field("timestamp", typeof(DateTime)).From("TimeStamp");
                model.Field("isDeleted", typeof(Boolean)).From("IsDeleted");
                model.Field("isTyping", typeof(Boolean)).From("IsTyping");
                model.Field("isPinned", typeof(Boolean)).From("IsPinned");
            })
        )
    )
)
JS
<script>
    function onSendMessage(e){
        const currentUser = {
            id: 1,
            name: "Lora",
            iconUrl: "https://demos.telerik.com/aspnet-core/shared/web/Customers/RICSU.jpg",
            iconAltText: "Lora's profile picture"
        };

        e.message.authorId = currentUser.id;
        e.message.authorName = currentUser.name;
        e.message.authorImageUrl = currentUser.iconUrl;
        e.message.authorImageAltText = currentUser.iconAltText;

        setTimeout(() => {
            e.sender.scrollToBottom();
        }, 30);
    }
</script>

Remote Binding

Field Mapping

Ajax Data Binding

Custom DataSource

See Also