Radzen Pager/Paging not showing

Hi to all.

Issue:
Found out that the Pager Component is not showing which I place this code to the razor component page.

<RadzenPager Count="2" PageSize="10" PageNumbersCount="3" PageChanged="@PageChanged" />

And I even try for using RadzenDataList with

AllowPaging="true".

The Paging part is not even showing as well.

Completed code:

<RadzenDataList WrapItems="true" AllowPaging="true" Data="@games" TItem="Models.Game.GameDto">
    <Template Context="game">
        <RadzenCard Style="width:300px;">
            <div class="d-flex flex-row align-items-center text-black-50">
                @game.Name
            </div>
            <hr style="border: none; background-color: rgba(0,0,0,.08); height: 1px; margin: 1rem 0;" />
            <div class="row">
            </div>
        </RadzenCard>
    </Template>
</RadzenDataList>

<RadzenPager Count="2" PageSize="10" PageNumbersCount="3" PageChanged="@PageChanged" />

UI Result

Rendered HTML

While comparing HTML from my side with Radzen Blazor Pager & DataList Components, I noticed that no rz-paginator HTML element was rendered on my side.

Question(s):

  1. Is it a bug or due to I miss out on any configuration?
  2. Is it not supported in the free version?
  3. Do the Pager component works independently?
    This means I can use my own table/list and plugin with the Pager component, with the PageChange event to fire the filtering & paging logic to update my table/list. Without the needs of Radzen.DataList

Specification:

  • Blazor Server App (.Net 5)
  • Radzen.Blazor 3.13.2 (Latest as version listed in GitHub)

Thanks in advance for replying and solving the doubt.

Our online demo shows a working configuration. You can compare it with your settings.

Hi, thanks for the reply. Checked the possible configuration and clone the code as similar to the demo.

But still nothing show out for paging part.

@page "/pager"

@using Radzen.Blazor
@using Radzen

<RadzenDataList WrapItems="true" AllowPaging="true" Data="@games" TItem="GameDto">
    <Template Context="game">
        <RadzenCard Style="width:300px;">
            <div class="d-flex flex-row align-items-center">
                @game.Name
            </div>
            <hr style="border: none; background-color: rgba(0,0,0,.08); height: 1px; margin: 1rem 0;" />
        </RadzenCard>
    </Template>
</RadzenDataList>

<RadzenPager ShowPagingSummary="true" PagingSummaryFormat="@pagingSummaryFormat" Count="count" PageSize="@pageSize" PageNumbersCount="10" PageChanged="@PageChanged" />

@code {
    string pagingSummaryFormat = "Displaying page {0} of {1} (total {2} records)";

    private IEnumerable<GameDto> games;
    int count = 2;
    int pageSize = 10;
    IEnumerable<GameDto> Games = new List<GameDto>
    {
            new GameDto { Name = "a" },
            new GameDto { Name = "b" },
            new GameDto { Name = "c" },
        };

    protected override void OnInitialized()
    {
        count = Games.Count();
        games = GetGames(0, pageSize);
    }

    void PageChanged(PagerEventArgs args)
    {
        games = GetGames(args.Skip, args.Top);
    }

    IEnumerable<GameDto> GetGames(int skip, int take)
    {
        return Games.Skip(skip).Take(take).ToList();
    }

    public class GameDto
    {
        public string Name { get; set; }
    }
}

Screenshot

HTML

Pager is invisible if Count is less than PageSize as all items are visible and paging UI is not needed.

1 Like

Hi, thanks for the speedy response. It works now as you suggested when I set the page size to 1.

And can I ask for one more question:

Pager is invisible if Count is less than PageSize as all items are visible and paging UI is not needed.

So it is impossible that show pager by default? It's quite surprising that suddenly that pager is gone when there is only 1 page. So I can show the result in PagerSummary such as

Show page 1 of 1 (total 1 record)

It looks like a feature but hope that you can explain the possibility as the question mentioned above.

Anyway, really appreciate the effort to assist my doubt. Thanks! =)

[And this post can be closed as it solved my doubt].