How to set text label in PazeSizeOption dropdown in RadzenDatagrid?

Radzen.Blazor Components
1

Is there a way to show the page size options with Text labels in the dropdown? Currently, we can only set integers. Can we show something like the image below?

page size dropdown
page size dropdown193×507 5.54 KB

2

This is not supported.

3

You are can do this by adding a specific value to the PageSizeOptions list representing "All" (e.g. 1000000) and style the generated HTML elements marked with aria-label="1000000".

Code behind.

@code {
    private readonly int[] pageSizeOptions = { 1000000, 10, 20, 30 };
}

Markup.

<RadzenDataGrid ... PageSizeOptions="@(this.pageSizeOptions)" ... >
    ...
</RadzenDataGrid>

CSS.

/* hide span of li with aria-label="1000000" */
li.rz-dropdown-item[aria-label="1000000"] span {
    display: none;
}

/* show after element with content "All" */
li.rz-dropdown-item[aria-label="1000000"]::after {
    content: 'All';
}

/* hide label of drop-down when input with aria-label="1000000" is shown */
rz-paginator .rz-dropdown .rz-helper-hidden-accessible:has(> input[aria-label="1000000"]) ~ label {
    display: none;
}

/* show after element with content "All" */
.rz-paginator .rz-dropdown:has(.rz-helper-hidden-accessible input[aria-label="1000000"])::after {
    content: 'All';
}