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

Pager Events

This article explains the events available in the Telerik Pager for Blazor:

PageChanged

The PageChanged event fires when a new page is selected. You can use it to implement load on demand.

Make sure to update the current page index when using the event.

Handle PageChanged

<TelerikPager Total="@TotalItems"
              ButtonCount="@ButtonCount"
              PageSize="@ItemsOnPage"
              Page="@CurrentPage"
              PageChanged="@PageChangedHandler">
</TelerikPager>

<div class="text-info">@Result</div>

@code {
    public int TotalItems { get; set; } = 80;
    public int ButtonCount { get; set; } = 4;
    public int ItemsOnPage { get; set; } = 10;
    public int CurrentPage { get; set; } = 2;
    public string Result { get; set; }

    void PageChangedHandler(int newPage)
    {
        CurrentPage = newPage;
        Result = $"Current page: {newPage}";
    }
}

The result from the code snippet above

config of the pager with one-way binding

PageSizeChanged

The PageSizeChanged event fires when the user changes the page size via the pager DropDownList. The existence of this event also ensures that the PageSize attribute supports two-way binding.

If the user selects the "All" option from the page size DropDownList, the PageSizeChanged event will receive the total item count as an argument.

Make sure to update the current page size when using the event.

Handle PageSizeChanged

<TelerikPager Total="@TotalItems"
              Page="@CurrentPage"
              PageSize="@ItemsOnPage"              
              PageSizeChanged="@PageSizeChangedHandler">
</TelerikPager>

<div class="text-info">@Result</div>

@code {
    public int TotalItems { get; set; } = 80;
    public int ItemsOnPage { get; set; } = 10;
    public int CurrentPage { get; set; } = 2;
    public string Result { get; set; }

    void PageSizeChangedHandler(int newPageSize)
    {
        ItemsOnPage = newPageSize;
        Result = $"Current page size: {newPageSize}";
    }
}

See Also

In this article
Not finding the help you need? Improve this article