starred/radzen-blazor
1
0
Fork 0
mirror of https://github.com/radzenhq/radzen-blazor.git synced 2026-02-04 05:35:44 +00:00
Code Issues 1.3k Packages Projects Releases 22 Wiki Activity

PR: Add PagingSummaryTemplate to RadzenDataGrid (Fixes [#2077](https://github.com/radzenhq/radzen-blazor/issues/2077)) (#2079)

Browse Source 
* fix: added PagingSummaryTemplate as replacement for PagingSummaryFormat

* In `DataGridPagerApi.razor`, added a `PagingSummaryTemplate` within the `RadzenDataGrid` component to provide a visual summary of the current page and total records displayed.
This commit is contained in:
Jeffrey van der Stad
2025-04-05 23:21:16 +10:30
committed by GitHub
parent 3ce4f8da3a
commit 3818d0e607
7 changed files with 55 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
Radzen.Blazor/PagedDataBoundComponent.cs
View File

@@ -190,9 +190,21 @@ namespace Radzen
/// Gets or sets the pager summary format.
/// </summary>
/// <value>The pager summary format.</value>
/// <remarks>
/// <see cref="PagingSummaryTemplate" /> has preference
/// </remarks>
[Parameter]
public string PagingSummaryFormat { get; set; } = "Page {0} of {1} ({2} items)";
#nullable enable
/// <summary>
/// Gets or sets the pager summary template.
/// </summary>
/// <remarks>Has preference over <see cref="PagingSummaryFormat" /></remarks>
[Parameter]
public RenderFragment<PagingInformation>? PagingSummaryTemplate { get; set; }
#nullable restore
/// <summary>
/// Gets or sets the pager's first page button's title attribute.
/// </summary>

10
Radzen.Blazor/PagingInformation.cs Normal file
View File

@@ -0,0 +1,10 @@
namespace Radzen.Blazor
{
/// <summary>
/// Represents paging information.
/// </summary>
/// <param name="CurrentPage">The current page number.</param>
/// <param name="NumberOfPages">The total number of pages.</param>
/// <param name="TotalCount">The total count of items.</param>
public record PagingInformation(int CurrentPage, int NumberOfPages, int TotalCount);
}

4
Radzen.Blazor/RadzenDataGrid.razor
View File

@@ -78,7 +78,7 @@
}
@if (AllowPaging && PagerPosition.HasFlag(PagerPosition.Top))
{
<RadzenPager HorizontalAlign="@PagerHorizontalAlign" AlwaysVisible="@PagerAlwaysVisible" @ref="topPager" Count="@Count" PageSize="@PageSize" PageNumbersCount="@PageNumbersCount" PageChanged="@ChangePage" PageSizeChanged="@OnPageSizeChanged" PageSizeOptions="@PageSizeOptions" ShowPagingSummary="@ShowPagingSummary" PagingSummaryFormat="@PagingSummaryFormat" PageSizeText="@PageSizeText" Density="@Density" FirstPageTitle="@FirstPageTitle" FirstPageAriaLabel="@FirstPageAriaLabel" PrevPageAriaLabel="@PrevPageAriaLabel" PrevPageTitle="@PrevPageTitle" NextPageAriaLabel="@NextPageAriaLabel" NextPageTitle="@NextPageTitle" LastPageAriaLabel="@LastPageAriaLabel" LastPageTitle="@LastPageTitle" PageAriaLabelFormat="@PageAriaLabelFormat" PageTitleFormat="@PageTitleFormat" PrevPageLabel="@PrevPageLabel" NextPageLabel="@NextPageLabel" />
<RadzenPager HorizontalAlign="@PagerHorizontalAlign" AlwaysVisible="@PagerAlwaysVisible" @ref="topPager" Count="@Count" PageSize="@PageSize" PageNumbersCount="@PageNumbersCount" PageChanged="@ChangePage" PageSizeChanged="@OnPageSizeChanged" PageSizeOptions="@PageSizeOptions" ShowPagingSummary="@ShowPagingSummary" PagingSummaryFormat="@PagingSummaryFormat" PagingSummaryTemplate="@PagingSummaryTemplate" PageSizeText="@PageSizeText" Density="@Density" FirstPageTitle="@FirstPageTitle" FirstPageAriaLabel="@FirstPageAriaLabel" PrevPageAriaLabel="@PrevPageAriaLabel" PrevPageTitle="@PrevPageTitle" NextPageAriaLabel="@NextPageAriaLabel" NextPageTitle="@NextPageTitle" LastPageAriaLabel="@LastPageAriaLabel" LastPageTitle="@LastPageTitle" PageAriaLabelFormat="@PageAriaLabelFormat" PageTitleFormat="@PageTitleFormat" PrevPageLabel="@PrevPageLabel" NextPageLabel="@NextPageLabel" />
}
<div class="rz-data-grid-data" tabindex="-1">
@@ -284,7 +284,7 @@
@if (AllowPaging && PagerPosition.HasFlag(PagerPosition.Bottom))
{
<RadzenPager HorizontalAlign="@PagerHorizontalAlign" AlwaysVisible="@PagerAlwaysVisible" @ref="bottomPager" Count="@Count" PageSize="@PageSize" PageNumbersCount="@PageNumbersCount" PageChanged="@ChangePage" PageSizeChanged="@OnPageSizeChanged" PageSizeOptions="@PageSizeOptions" ShowPagingSummary="@ShowPagingSummary" PagingSummaryFormat="@PagingSummaryFormat" PageSizeText="@PageSizeText" Density="@Density" FirstPageTitle="@FirstPageTitle" FirstPageAriaLabel="@FirstPageAriaLabel" PrevPageAriaLabel="@PrevPageAriaLabel" PrevPageTitle="@PrevPageTitle" NextPageAriaLabel="@NextPageAriaLabel" NextPageTitle="@NextPageTitle" LastPageAriaLabel="@LastPageAriaLabel" LastPageTitle="@LastPageTitle" PageAriaLabelFormat="@PageAriaLabelFormat" PageTitleFormat="@PageTitleFormat" PrevPageLabel="@PrevPageLabel" NextPageLabel="@NextPageLabel" />
<RadzenPager HorizontalAlign="@PagerHorizontalAlign" AlwaysVisible="@PagerAlwaysVisible" @ref="bottomPager" Count="@Count" PageSize="@PageSize" PageNumbersCount="@PageNumbersCount" PageChanged="@ChangePage" PageSizeChanged="@OnPageSizeChanged" PageSizeOptions="@PageSizeOptions" ShowPagingSummary="@ShowPagingSummary" PagingSummaryTemplate="@PagingSummaryTemplate" PageSizeText="@PageSizeText" Density="@Density" FirstPageTitle="@FirstPageTitle" FirstPageAriaLabel="@FirstPageAriaLabel" PrevPageAriaLabel="@PrevPageAriaLabel" PrevPageTitle="@PrevPageTitle" NextPageAriaLabel="@NextPageAriaLabel" NextPageTitle="@NextPageTitle" LastPageAriaLabel="@LastPageAriaLabel" LastPageTitle="@LastPageTitle" PageAriaLabelFormat="@PageAriaLabelFormat" PageTitleFormat="@PageTitleFormat" PrevPageLabel="@PrevPageLabel" NextPageLabel="@NextPageLabel" />
}
@if (@FooterTemplate != null)
{

4
Radzen.Blazor/RadzenDataList.razor
View File

@@ -6,7 +6,7 @@
<div @ref="@Element" @attributes="Attributes" class="@GetCssClass()" style="@Style" id="@GetId()">
@if (AllowPaging && PagerPosition.HasFlag(PagerPosition.Top))
{
<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" Density="@Density" FirstPageTitle="@FirstPageTitle" FirstPageAriaLabel="@FirstPageAriaLabel" PrevPageAriaLabel="@PrevPageAriaLabel" PrevPageTitle="@PrevPageTitle" NextPageAriaLabel="@NextPageAriaLabel" NextPageTitle="@NextPageTitle" LastPageAriaLabel="@LastPageAriaLabel" LastPageTitle="@LastPageTitle" PageAriaLabelFormat="@PageAriaLabelFormat" PageTitleFormat="@PageTitleFormat" PrevPageLabel="@PrevPageLabel" NextPageLabel="@NextPageLabel" />
<RadzenPager HorizontalAlign="@PagerHorizontalAlign" AlwaysVisible="@PagerAlwaysVisible" @ref="topPager" Count="@Count" PageSize="@PageSize" PageNumbersCount="@PageNumbersCount" PageChanged="@OnPageChanged" PageSizeChanged="@OnPageSizeChanged" PageSizeOptions="@PageSizeOptions" ShowPagingSummary="@ShowPagingSummary" PagingSummaryFormat="@PagingSummaryFormat" PagingSummaryTemplate="@PagingSummaryTemplate" PageSizeText="@PageSizeText" Density="@Density" FirstPageTitle="@FirstPageTitle" FirstPageAriaLabel="@FirstPageAriaLabel" PrevPageAriaLabel="@PrevPageAriaLabel" PrevPageTitle="@PrevPageTitle" NextPageAriaLabel="@NextPageAriaLabel" NextPageTitle="@NextPageTitle" LastPageAriaLabel="@LastPageAriaLabel" LastPageTitle="@LastPageTitle" PageAriaLabelFormat="@PageAriaLabelFormat" PageTitleFormat="@PageTitleFormat" PrevPageLabel="@PrevPageLabel" NextPageLabel="@NextPageLabel" />
}
@if (Data != null)
{
@@ -51,7 +51,7 @@
}
@if (AllowPaging && PagerPosition.HasFlag(PagerPosition.Bottom))
{
<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-pager-bottom" Density="@Density" FirstPageTitle="@FirstPageTitle" FirstPageAriaLabel="@FirstPageAriaLabel" PrevPageAriaLabel="@PrevPageAriaLabel" PrevPageTitle="@PrevPageTitle" NextPageAriaLabel="@NextPageAriaLabel" NextPageTitle="@NextPageTitle" LastPageAriaLabel="@LastPageAriaLabel" LastPageTitle="@LastPageTitle" PageAriaLabelFormat="@PageAriaLabelFormat" PageTitleFormat="@PageTitleFormat" PrevPageLabel="@PrevPageLabel" NextPageLabel="@NextPageLabel" />
<RadzenPager HorizontalAlign="@PagerHorizontalAlign" AlwaysVisible="@PagerAlwaysVisible" @ref="bottomPager" Count="@Count" PageSize="@PageSize" PageNumbersCount="@PageNumbersCount" PageChanged="@OnPageChanged" PageSizeChanged="@OnPageSizeChanged" PageSizeOptions="@PageSizeOptions" ShowPagingSummary="@ShowPagingSummary" PagingSummaryFormat="@PagingSummaryFormat" PagingSummaryTemplate="@PagingSummaryTemplate" PageSizeText="@PageSizeText" class="rz-pager-bottom" Density="@Density" FirstPageTitle="@FirstPageTitle" FirstPageAriaLabel="@FirstPageAriaLabel" PrevPageAriaLabel="@PrevPageAriaLabel" PrevPageTitle="@PrevPageTitle" NextPageAriaLabel="@NextPageAriaLabel" NextPageTitle="@NextPageTitle" LastPageAriaLabel="@LastPageAriaLabel" LastPageTitle="@LastPageTitle" PageAriaLabelFormat="@PageAriaLabelFormat" PageTitleFormat="@PageTitleFormat" PrevPageLabel="@PrevPageLabel" NextPageLabel="@NextPageLabel" />
}
</div>
}

15
Radzen.Blazor/RadzenPager.razor
View File

@@ -2,11 +2,20 @@
@if (GetVisible())
{
<div @ref="@Element" @attributes="Attributes" class="@GetCssClass()" style="@Style" id="@GetId()"
@onkeydown="@OnKeyDown" @onkeydown:preventDefault="preventKeyDown" @onkeydown:stopPropagation="true" tabindex=0
@onfocus=@OnFocus>
@onkeydown="@OnKeyDown" @onkeydown:preventDefault="preventKeyDown" @onkeydown:stopPropagation="true" tabindex=0
@onfocus=@OnFocus>
@if(ShowPagingSummary)
{
<span class="rz-pager-summary">@(string.Format(PagingSummaryFormat, CurrentPage + 1, numberOfPages, Count))</span>
<span class="rz-pager-summary">
@if (PagingSummaryTemplate != null)
{
@PagingSummaryTemplate(new(CurrentPage + 1, numberOfPages, Count))
}
else
{
@(string.Format(PagingSummaryFormat, CurrentPage + 1, numberOfPages, Count))
}
</span>
}
<a id="@(GetId() + "fp")" class="rz-pager-first rz-pager-element @(skip > 0 ? "": "rz-state-disabled") @(focusedIndex == -2 ? "rz-state-focused": "")" @onclick:preventDefault="true" @onclick="@(() => OnFirstPageClick())" aria-label="@FirstPageAriaLabel" role="button" title="@FirstPageTitle" disabled="@(CurrentPage <= 0)">
<span class="notranslate rz-pager-icon rzi rzi-step-backward"></span>

12
Radzen.Blazor/RadzenPager.razor.cs
View File

@@ -163,9 +163,21 @@ namespace Radzen.Blazor
/// Gets or sets the pager summary format.
/// </summary>
/// <value>The pager summary format.</value>
/// <remarks>
/// <see cref="PagingSummaryTemplate" /> has preference
/// </remarks>
[Parameter]
public string PagingSummaryFormat { get; set; } = "Page {0} of {1} ({2} items)";
#nullable enable
/// <summary>
/// Gets or sets the pager summary template.
/// </summary>
/// <remarks>Has preference over <see cref="PagingSummaryFormat" /></remarks>
[Parameter]
public RenderFragment<PagingInformation>? PagingSummaryTemplate { get; set; }
#nullable restore
/// <summary>
/// Gets or sets the page numbers count.
/// </summary>

7
RadzenBlazorDemos/Pages/DataGridPagerApi.razor
View File

@@ -18,7 +18,11 @@
</RadzenCard>
<RadzenDataGrid @ref=@dataGrid Data="@orderDetails" AllowPaging="true" PagerHorizontalAlign="HorizontalAlign.Center" AllowSorting="true"
PageSizeOptions="@pageSizeOptions" ShowPagingSummary="@showPagerSummary" PagingSummaryFormat="@pagingSummaryFormat" Page="@OnPage">
PageSizeOptions="@pageSizeOptions" ShowPagingSummary="@showPagerSummary" Page="@OnPage">
<PagingSummaryTemplate>
<RadzenIcon Icon="database" Style="color: var(--rz-primary); font-size: var(--rz-pager-summary-font-size);" />
Displaying page @context.CurrentPage of @context.NumberOfPages <b>(total @context.TotalCount records)</b>
</PagingSummaryTemplate>
<Columns>
<RadzenDataGridColumn Property="OrderID" Title="OrderID" />
<RadzenDataGridColumn Property="ProductID" Title="ProductID" />
@@ -38,7 +42,6 @@
</RadzenStack>
@code {
string pagingSummaryFormat = "Displaying page {0} of {1} <b>(total {2} records)</b>";
RadzenDataGrid<OrderDetail> dataGrid;
IEnumerable<int> pageSizeOptions = new int[] { 10, 20, 30 };