Display RadzenPager twice on a page

hjdrent · February 17, 2022, 10:50am

Hi
I have a RadzenPager on my blazor page which works fine.
The thing is, I would like to display this pager at the top as well as at the bottom of the page.
Sometimes the list on this page becomes very long so the customer would like to see the same pager at the top and at the bottom of the page.
How would I accomplish that the active page number is synchronized between these two pagers?
Thnx in advance.

enchev · February 17, 2022, 10:59am

You can use similar approach as our DataList component:

github.com

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

    
      
          @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)

github.com

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

    
      
                                  else
                                  {
                                      <span>Template</span>
                                  }
                              }
                          </div>
                      }
                  }
                  @if (AllowPaging && (PagerPosition == PagerPosition.Bottom || PagerPosition == PagerPosition.TopAndBottom))
                  {
                 <RadzenPager HorizontalAlign="@PagerHorizontalAlign" AlwaysVisible="@PagerAlwaysVisible" @ref="bottomPager" Count="@Count" PageSize="@PageSize" PageNumbersCount="@PageNumbersCount" PageChanged="@OnPageChanged" PageSizeChanged="@OnPageSizeChanged" PageSizeOptions="@PageSizeOptions" ShowPagingSummary="@ShowPagingSummary" PagingSummaryFormat="@PagingSummaryFormat" PageSizeText="@PageSizeText" class="rz-paginator-bottom" />
                  }
              </div>
          }