This is a migrated thread and some comments may be shown as answers.

Conversational UI virtual scroll

1 Answer 28 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Matej
Top achievements
Rank 1
Veteran
Matej asked on 26 Nov 2020, 07:47 AM

Hi,

we can have a lot of messages and attachments in our chat history. Is there a virtual scroll option or do you have any advice how to do this without loading every message at the beginning but enable access to the whole chat history? 

1 Answer, 1 is accepted

Sort by
0
Accepted
Stefan
Telerik team
answered on 26 Nov 2020, 08:24 AM

Hello, Matej,

In this case, this can be achieved with the lazy loading of the message during scroll similar to how it is done in most of the top messaging apps like Facebook Messanger, MS Teams etc.

We have a task logged for providing a method that will help with the scroll position as currently if we load more messages the scroll position will not move:

https://github.com/telerik/kendo-react/issues/786

Currently, a possible approach will be to keep in the state which was the last message (as a text), then go over all messages and programmatically scroll to that message using the scrollToView method:

https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

https://stackblitz.com/edit/react-conv-ui-scroll-738fhc?file=index.html

We understand that the current approach is not ideal, this is why we logged the task, but it could be useful until the official method is ready.

Virtualization is not recommended for messages.  The virtualization relies on elements with fixed height, which is not possible with the messages as they can be with very dynamic height. This is why even the top messaging applications use lazy loading instead of virtualization.

 

Regards,
Stefan
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
General Discussions
Asked by
Matej
Top achievements
Rank 1
Veteran
Answers by
Stefan
Telerik team
Share this question
or