Displaying date and time in the chat dialog

[Chris]

Hello - I am using the kendo ui asp.net mvc chat tool to provide a peer to peer chat solution for one of my projects. One of the requirements I have is to keep a log of the messages and then when the chat is initialized load a history of the messages for the last X number of days. I know that when you click on a conversation bubble in the chat box it displays the time the message was posted, but because the messages may span several days, I need a way to display both the date and the time the message was posted. Is there a way to do this? 

[Neli]

Hi Chris,

A possible approach to add the full date to each rendered message is to use custom templates for the text and message as in the example below:

 

 var TEXT_MESSAGE_TEMPLATE = kendo.template(
          '<div class="#=styles.message#">' +
          '<time class="#=styles.messageTime#">#= kendo.toString(kendo.parseDate(timestamp), "MM/dd/yyyy HH:mm:ss") #</time>' +
          '<div class="#=styles.bubble#">#:text#</div>' +
          '</div>');

        kendo.chat.registerTemplate("text", TEXT_MESSAGE_TEMPLATE);
        
        kendo.chat.registerTemplate("message", TEXT_MESSAGE_TEMPLATE);

If needed, you can reduce the font of the date using the following CSS:

 .k-message-time {
          font-size:10px !important;
        }

The Dojo linked here demonstrates the approach described above.

Let me know in case you have additional questions on the matter.

Regards,
Neli
Progress Telerik

[Chris]

Thanks Neli. I think this will work. I will give it a try.