New to Telerik UI for Blazor? Download Free 30-day trial

Chat - Endless Scrolling

Message 3: Proin a nunc quam.
5/11/2026 1:12:58 PM
Jane
Message 85: Nam convallis convallis vehicula.
5/11/2026 1:12:58 PM
Jamie
Message 86: Ut diam nibh, gravida nec nibh laoreet, vulputate tincidunt ex.
5/11/2026 1:12:58 PM
Jane
Message 87: Etiam ut ante blandit, volutpat ex vehicula, ultrices eros.
5/11/2026 1:12:58 PM
Jamie
Message 88: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
5/11/2026 1:12:58 PM
Jane
Message 89: Suspendisse diam mi, sollicitudin sit amet ante at, tincidunt suscipit elit.
5/11/2026 1:12:58 PM
Jamie
Message 90: Aenean ornare semper ligula luctus efficitur.
5/11/2026 1:12:58 PM
Jane
Message 91: Proin a nunc quam.
5/11/2026 1:12:58 PM
Jamie
Message 92: Nunc aliquet convallis velit sit amet faucibus.
5/11/2026 1:12:58 PM
Jane
Message 93: Maecenas lacinia, massa vitae tincidunt laoreet, nibh velit imperdiet metus, eu hendrerit est tellus non urna.
5/11/2026 1:12:58 PM
Jamie
Message 94: Phasellus fringilla tincidunt urna, et sodales risus lobortis sit amet. Nam eros sem, facilisis id tellus a, consequat euismod orci.
5/11/2026 1:12:58 PM
Jane
Message 95: Aliquam et bibendum dui.
5/11/2026 1:12:58 PM
Jamie
Message 96: Nam convallis convallis vehicula.
5/11/2026 1:12:58 PM
Jane
Message 97: Ut diam nibh, gravida nec nibh laoreet, vulputate tincidunt ex.
5/11/2026 1:12:58 PM
Jamie
Message 98: Etiam ut ante blandit, volutpat ex vehicula, ultrices eros.
5/11/2026 1:12:58 PM
Jane
Message 50: Phasellus fringilla tincidunt urna, et sodales risus lobortis sit amet. Nam eros sem, facilisis id tellus a, consequat euismod orci.
Message 99: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
5/11/2026 1:12:58 PM
Jamie
Message 51: Aliquam et bibendum dui.
Message 100: Suspendisse diam mi, sollicitudin sit amet ante at, tincidunt suscipit elit.
  • ChatStartIndex: 84
  • ChatEndIndex: 100
  • ChatTotal: 100
  • Endless-scrolling.razor
  • Author.cs
  • Message.cs
Loading the demo source code...please wait.
Style in ThemeBuilder
  • Custom SASS variables
  • Atomic customizations
  • Sharing projects
Start Theming

Description

The Telerik Chat component for Blazor supports endless scrolling that enables the app to load messages on demand as the user scrolls. The feature reduces the number of rendered messages and improves the performance.

Chat endless scrolling has two modes of configuration and operation. In the simpler case, you only need to set ScrollMode="@ChatScrollMode.Endless" and provide all messages in the Data parameter. If the number of messages is huge, the component can request them in chunks. In this case, the endless scrolling depends on several events and parameters:

  • OnLoadMoreMessages event
  • OnReferencedMessageClick event
  • PinnedMessages parameter
  • RepliedToMessages parameter
  • ScrollMode parameter
  • PageSize parameter
  • StartIndex parameter
  • EndIndex parameter
  • Total parameter
This Blazor Chat Endless Scrolling example is part of a unique collection of hundreds of Blazor demos, with which you can see all Telerik UI for Blazor components and their features in action. View the source code of the demos from the library or directly adapt, and edit them and their theme appearance in Telerik REPL for Blazor or ThemeBuilder.

Support & Learning Resources

An error has occurred. This application may no longer respond until reloaded.