# Chat Endless Scrolling

The Telerik UI for Blazor Chat component supports endless scrolling, which loads messages in pages as the user scrolls. The component renders a chunk of messages instead of the full dataset and then uses load on demand during scrolling. Endless scrolling supports two modes: client-side, where the component pages the `Data` collection automatically, and server-side, where the application supplies pages through the `OnLoadMoreMessages` event.

To enable endless scrolling:

1. Set `ScrollMode` to `ChatScrollMode.Endless`.
2. Optionally, set `PageSize` to the desired number of messages to load on demand. The default value is `20`.

On initialization, the Chat scrolls to the bottom and shows the latest messages. If the user scrolls up, the component loads older messages.

## Client-Side Endless Scrolling

In client-side mode, the component pages the `Data` collection automatically. No additional parameters or event handlers are required. Subscribe to [`OnLoadMoreMessages`](https://www.telerik.com/blazor-ui/documentation/components/chat/endless-scrolling#loading-more-messages), if you want to detect changes in rendered message range.

> caption Chat with client-side endless scrolling

<demo metaUrl="client/chat/endless-scrolling/client-side/" height="600"></demo>

## Server-Side Endless Scrolling

In server-side mode, the Chat requests messages page by page. Use this mode when the full dataset is too large to be loaded into memory at once.

To use server-side endless scrolling, set the following parameters in addition to `ScrollMode`:

1. Set `Total` to the total number of messages in the full dataset. Update this value when users send new messages.
2. Set `StartIndex` to the index of the first message in the current `Data` collection.
3. Set `EndIndex` to the index of the last message in the current `Data`.
4. Subscribe to [`OnLoadMoreMessages`](https://www.telerik.com/blazor-ui/documentation/components/chat/endless-scrolling#loading-more-messages) and update `Data`, `StartIndex`, and `EndIndex` in the handler.

> note The `StartIndex` and `EndIndex` parameters reflect the slice of the full dataset that is currently in `Data`. The component uses them to determine whether more pages exist and in which direction to load.

### Loading More Messages

The `OnLoadMoreMessages` event fires whenever the rendered message range changes.

The event arguments expose `StartIndex` and `EndIndex`, which define the full message range that should be rendered. Replace `Data` with the slice of the full dataset indicated by the args and update `StartIndex` and `EndIndex` to match.

After updating `Data`, `StartIndex`, and `EndIndex`, also update `RepliedToMessages` to include any reply-to source messages that are not in the current page.

### Navigating to Referenced Messages

The `OnReferencedMessageClick` event fires when the user clicks a pinned message banner or a reply-to reference. Use the `Id` property of the event args to locate the target message in the full dataset, then replace `Data`, `StartIndex`, and `EndIndex` to load the page that contains the target.

The component scrolls to the target message after `Data` is updated.

### Sending and Receiving Messages

When the user sends a message or the application receives one externally, add the message to both the full dataset and the current `Data` collection. Update `EndIndex` and `Total` to reflect the new count.

The component skips `OnLoadMoreMessages` when the last page is already displayed and scrolls to the new message automatically.

To trigger the same behavior for an externally received message, call `ChatRef.Refresh()` after updating `Data`.

> caption Receiving an external message during server-side endless scrolling

```RAZOR.skip-repl
private void ReceiveExternalMessage(ChatMessage newMessage)
{
    AllMessages.Add(newMessage);
    ChatMessages.Add(newMessage);
    ChatEndIndex = ChatStartIndex + ChatMessages.Count;
    TotalCount++; // if not a calculated property

    ChatRef?.Refresh();
}
```

### Example

> caption Chat with server-side endless scrolling

<demo metaUrl="client/chat/endless-scrolling/server-side/" height="600"></demo>

## Endless Scrolling Parameters

The parameters below are specific to endless scrolling. For the full list of Chat parameters, see the [Chat Overview](https://www.telerik.com/blazor-ui/documentation/components/chat/overview#chat-parameters).

<style>
    .article table {
        table-layout: auto;
        word-break: normal;
    }
</style>

| Parameter                    | Type and Default Value                               | Description                                                                                                                                                                         |
| ---------------------------- | ---------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `ScrollMode`                 | `ChatScrollMode` enum <br /> (`Scrollable`)          | Sets the scroll behavior. `Scrollable` renders all messages. `Endless` enables paged loading.                                                                                       |
| `PageSize`                   | `int` <br /> (`20`)                                  | The number of messages per page. Required when `ScrollMode` is `Endless`.                                                                                                           |
| `EndlessScrollDebounceDelay` | `int` <br /> (`150`)                                 | The debounce delay in milliseconds for the scroll handler. Controls how long the component waits after the user stops scrolling before checking whether a new page must be loaded.  |
| `Total`                      | `int`                                                | The total number of messages in the full dataset. Required when `OnLoadMoreMessages` is set. Ignored in client-side mode.                                                           |
| `StartIndex`                 | `int`                                                | The index, in the full dataset, of the first message in `Data`. Update this value in the `OnLoadMoreMessages` handler as data changes. Required when `OnLoadMoreMessages` is set.   |
| `EndIndex`                   | `int`                                                | The index, in the full dataset, past the last message in `Data`. Update this value in the `OnLoadMoreMessages` handler as data changes. Required when `OnLoadMoreMessages` is set.  |
| `PinnedMessages`             | `IEnumerable<TItem>`                                 | Pinned messages that may not be in the current `Data` page. The component displays the last item in the collection as the active pinned message banner.                             |
| `RepliedToMessages`          | `IEnumerable<TItem>`                                 | Messages referenced by reply-to that may not be in the current `Data` page. The component uses these to render reply previews.                                                      |
| `OnLoadMoreMessages`         | `EventCallback<ChatLoadMoreMessagesEventArgs>`       | Fires when the component needs a new page. Update `Data`, `StartIndex`, and `EndIndex` inside the handler.                                                                          |
| `OnReferencedMessageClick`   | `EventCallback<ChatReferencedMessageClickEventArgs>` | Fires when the user clicks a pinned message banner or a reply-to reference. Resolve the target message position and replace `Data`, `StartIndex`, and `EndIndex` to navigate to it. |

## See Also

* [Live Demo: Chat Endless Scrolling](https://demos.telerik.com/blazor-ui/chat/endless-scrolling)
* [Chat Data Binding](https://www.telerik.com/blazor-ui/documentation/components/chat/data-binding)
* [Chat Events](https://www.telerik.com/blazor-ui/documentation/components/chat/events)