Displaying a message in the chat as sent or received.

[Chris]

I am loading the chat with a history of the individuals dialog when the person logs into the system using the renderMessage method (see code below). 

        function LoadChat(chat) {
            $.ajax({
                url: "/.../Chat/LoadChatBox?studyID=" + @Model.Recipient.StudyID,
                success: function (data) {
                    var chatHistory = JSON.parse(data);
                    if (chatHistory) {
                        $.each(chatHistory.messages, function (n, elem) {
                            chat.renderMessage(elem.message, elem.sender);
                        });
                    }
                }
            });
        }

This works fine but it displays all the messages on the left side of the grid as though they have been received. Instead I would like to show the messages as sent messages and received messages as they originally were. Is there a way to accomplish this? 

[Petar]

Hi Chris,

You can render the messages from sender and user using the renderMessage method from the code you shared. Here is a Dojo example demonstrating how the targeted functionality can be implemented. 

In the "each" loop inside the success function, you will have to differentiate the two message types - current user and 'other' user. Based on this, you can pass different "sender" data as a second parameter of the renderMessage method.

Check the linked above Dojo example and let me know if you have any questions about the provided implementation.

Regards,
Petar
Progress Telerik

[Chris]

Thanks, I will give this a try and let you know if it will work.

[Chris]

Hi Petar - So that works. However, the person who loads the chat box may not be the person who originally sent the message, so is there a way I can display the original sender? Maybe at the top of the bubble like the received messages show who sent them?

[Chris]

Hi Petar - I was able to display the name of the original sender using a template for historical messages. Seems to work fine, so I think we good.

[Petar]

Hi Chris.

I am happy to hear that you've managed to implement the desired functionality in your application.

Thank you for sharing with the community the approach you used to achieve what you need!