Duplicate RadzenPager

hjdrent · February 4, 2022, 11:37am

Hi
I placed a RadzenPager in the top of my blazor page.
Now I wanted the same pager at the bottom of my page so I copied it to the bottom of the page.
Unfortunately, if I select a new page in the first pager, the current page of the second pager isn't updated.
Is there any way to accomplish this? Without using Javascript.
Thnx in advance
Henk

enchev · February 4, 2022, 11:48am

You can bind both pagers to same variables/properties similar to our DataList component:

github.com

radzenhq/radzen-blazor/blob/master/Radzen.Blazor/RadzenDataList.razor

@using System.Linq.Expressions
@typeparam TItem
@inherits PagedDataBoundComponent<TItem>
@if (Visible)
{
    <div @ref="@Element" @attributes="Attributes" class="@GetCssClass()" style="@Style" id="@GetId()">
        @if (AllowPaging && (PagerPosition == PagerPosition.Top || PagerPosition == PagerPosition.TopAndBottom))
        {
       <RadzenPager HorizontalAlign="@PagerHorizontalAlign" AlwaysVisible="@PagerAlwaysVisible" @ref="topPager" Count="@Count" PageSize="@PageSize" PageNumbersCount="@PageNumbersCount" PageChanged="@OnPageChanged" PageSizeChanged="@OnPageSizeChanged" PageSizeOptions="@PageSizeOptions" ShowPagingSummary="@ShowPagingSummary" PagingSummaryFormat="@PagingSummaryFormat" PageSizeText="@PageSizeText" />
        }
        @if (Data != null)
        {
            @if (!WrapItems)
            {
                @foreach (var item in LoadData.HasDelegate ? Data : PagedView)
                {
                    <ul class="rz-datalist-data">
                        <li>
                            @if (Template != null)
                            {

This file has been truncated. show original

hjdrent · February 4, 2022, 12:36pm

Hi Vladimir
Thanx for the quick response.
I looked at your code but I can't see the binding there. Could you explain a little more please?
Grtz Henk