Is it possible to data bind the Conversational-UI Chat messages?

[Travis]

Howdy!

I have a scenario in which I have messages stored in a database. My client would like to enable a website portal for his employees to read/respond to said messages. (We already have this implemented and working in a WPF application using the RadChat control from the WPF library)

The documentation for the chat control in ASP.NET Core is really sparse. Like 3 pages of information and that's it. No examples on data binding like most other controls you have... So, my question is this: is it possible to bind the Messages that show up in the chat control similar to the way in which I can say, bind the data that shows up in the ASP.NET Core Grid using a data source transport mechanism?

I know in the case of the WPF implementation, I had to implement a converter for the messages in order to bind them to the control...

[Mihaela]

Hello Travis,

The Chat component does not support DataSource binding in the way other widgets do. A similar case have been discussed in the following forum thread:

https://www.telerik.com/forums/chat-datasource

It suggests how to store messages in a custom source and retrieve them afterward.

At this stage, there is no other approach for storing Chat messages in a DataSource. 

Here is an example of how you could retrieve messages from a custom data source:

@(Html.Kendo().DataSource<Model>()
        .Name("chatDataSource")
        .Ajax(datasource => datasource
        .PageSize(20)
        .Read(read => read.Action("GetMessages", "ControllerName")))
)

@(Html.Kendo().Chat()
        .Name("chat")
        .User(user => user
            .Name(@userName)
            .IconUrl("https://demos.telerik.com/kendo-ui/content/chat/avatar.png")
        )
        .Events(events => events
            .Post("onPost")
        )
)

@(Html.Kendo().Button()
          .Name("renderMessageBtn")
          .Content("Render Chat Message")
          .Events(ev => ev.Click("renderChatMessage"))
)
<script>
    function onPost(args) {
        //save the posted message
    }

    function renderChatMessage() {
        var chat = $("#chat").data("kendoChat");

            chatDataSource.read().then(function () {
                var chatDS = chatDataSource.data();
                for (var i = 0; i < chatDS.length; i++) {

                    chat.renderMessage({
                        type: "text",
                        text: chatDS[i].Message
                    }, {
                        id: userID,
                        name: userName,
                        iconUrl: "https://demos.telerik.com/kendo-ui/content/web/chat/avatar.png"
                    });
                }
            });
        }

        $(document).ready(function () {
            var chat = $('#chat').getKendoChat();
            chat.setOptions({
                user: {
                    id: 1,
                    iconUrl: "https://demos.telerik.com/kendo-ui/content/chat/InsuranceBot.png",
                    name: name
                }
            });
        });
</script>

If you have any further queries, you are more than welcome to let me know.

 

 

Regards, Mihaela Progress Telerik