Progress® Telerik® UI for Blazor Feedback Portal
Back to Feed
Request a Feature Report a Bug
Completed
Last Updated: 23 May 2024 10:42 by ADMIN
Release 2024 Q2 (May)
Pingu
Created on: 12 Oct 2022 21:52
Category: Pager
Type: Bug Report
9
A blank value appears in the dropdown when PageSize is not within the predefined PageSizes or equals the TotalCount

I've made a simple blazor repl demo here: https://blazorrepl.telerik.com/mmlYatun39gTFEgO21

As you can see, TotalCount is 10, and the current PageSize is also 10. When these values match, the value in the "items per page" dropdown isn't present. Select any other value, and it will be present (for 5, 20, 40). Come back to 10, and again, the value disappears.

Duplicated Items
5 comments
ADMIN
Hristian Stefanov
Posted on: 23 May 2024 10:42

Hi Paul,

Thank you for bringing this to our attention.

Indeed, it seems that this configuration of the PageSize is still not fixed with the latest version (6.0.0). I have already referred the matter to our development team and we are revising it.

I apologize for the inconvenience.

Keep tracking the status here for further updates.

Regards,
Hristian Stefanov
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Telerik family, check out our getting started resources!
Paul
Posted on: 16 May 2024 12:11

After installing version 6.0 there are still issues.

 

I used REPL from : https://blazorrepl.telerik.com/mxlFwHbI43ZFgTtt05

===================

@using TelerikBlazorDemos.DataAccess.Services

@using TelerikBlazorDemos.DataAccess.Dto
@page "/grid/sizing"
@inject HttpClient http
<div class="demo-grid-container">
        <TelerikGrid Data=@GridData
                     Size="@ThemeConstants.Grid.Size.Small"
                     PageSize="@PageSize"
                     PageSizeChanged="@SetPageSizeChangedAsync"
                     Pageable="true"
                     Resizable="true"
                     Navigable="true"
                     Height="437px">
            <GridToolBarTemplate>
                <span>High Density Size Grid</span>
                <span class="k-toolbar-spacer"></span>
                <GridCommandButton Command="ExcelExport" Icon="@SvgIcon.FileExcel" Size="@ThemeConstants.Button.Size.Small">Export to Excel</GridCommandButton>
            </GridToolBarTemplate>
            <GridSettings>
                <GridPagerSettings InputType="PagerInputType.Input"
                                       PageSizes="@this._pageSizes"
                                       ButtonCount="5"
                                       Adaptive="true"
                                       Position="PagerPosition.Bottom" />
            </GridSettings>
            <GridExport>
                <GridExcelExport FileName="telerik-grid-export" AllPages="true" />
            </GridExport>
            <GridColumns>
                <GridColumn Field=@nameof(StockDto.Symbol) Title="Name" Width="59px" />
                <GridColumn Field=@nameof(StockDto.Date) Title="Date" DisplayFormat="{0:dd MMM}" Width="64px" />
                <GridColumn Title="Chng" Width="60px">
                    <Template>
                        @{
                            var change = GetChange((StockDto)context);
                        }
                        <span class="@(change < 0 ? "red" : "blue")">
                            @change.ToString("0.00")
                        </span>
                    </Template>
                </GridColumn>
                <GridColumn Title="%Chng" Width="70px">
                    <Template>
                        @{
                            var changePercentage = GetChangePercentage((StockDto)context);
                        }
                        <span class="@(changePercentage < 0 ? "red" : string.Empty)">
                            @changePercentage.ToString("P2")
                        </span>
                    </Template>
                </GridColumn>
                <GridColumn Field=@nameof(StockDto.Close) DisplayFormat="{0:C2}" Width="66px" />
                <GridColumn Field=@nameof(StockDto.Open) DisplayFormat="{0:C2}" Width="66px" />
                <GridColumn Field=@nameof(StockDto.Low) Title="DLow" DisplayFormat="{0:C2}" Width="66px" />
                <GridColumn Field=@nameof(StockDto.High) Title="DHigh" DisplayFormat="{0:C2}" Width="66px" />
                <GridColumn Field=@nameof(StockDto.Volume) Title="Volume" Width="80px" />
            </GridColumns>
        </TelerikGrid>
    </div>
<TelerikMediaQuery Media="(max-width: 960px)" OnChange="@(matchesQuery => OnMediaQueryChange(matchesQuery, screenIsSmall: true))" />
<TelerikMediaQuery Media="(min-width: 961px)" OnChange="@(matchesQuery => OnMediaQueryChange(matchesQuery, screenIsSmall: false))" />
@code {
    public virtual int PageSize { get; set; } = 15;
    private async Task SetPageSizeChangedAsync(int pageSize)
    {
        if (pageSize > 0 && Equals(PageSize, pageSize) is false)
       { 
           PageSize = pageSize;
           await Task.CompletedTask;
       }
    }
    private readonly List<int?> _pageSizes = new() { 5, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 95, 100 };
    private StockService _stockService;
    private StockService StockService
    {
        get
        {
            if(_stockService == null)
            {
                _stockService = new StockService(http);
            }
            return _stockService;
        }
    }
    private void OnMediaQueryChange(bool matchesQuery, bool screenIsSmall)
    {
        if (matchesQuery && ScreenIsSmall != screenIsSmall)
        {
            ScreenIsSmall = screenIsSmall;
        }
    }
    public List<StockDto> GridData { get; set; }
    public bool ScreenIsSmall { get; set; }
    protected override async Task OnInitializedAsync()
    {
        GridData = (await StockService.GetStocks()).Take(100).ToList();
    }
    public decimal GetChange(StockDto stock) => stock.Close - stock.Open;
    public decimal GetChangePercentage(StockDto stock) => (GetChange(stock) / stock.Open);
}
<style>
    .red {
        color: red;
    }
    .blue {
        color: blue;
    }
    .demo-grid-container {
        display: flex;
        flex-direction: @(ScreenIsSmall ? "column" : "row");
        flex-wrap: nowrap;
        gap: 1.5em;
    }
    .demo-dense-grid,
    .demo-default-grid {
        display: contents;
    }
    .demo-dense-grid .k-grid,
    .demo-default-grid .k-grid {
        width: @(ScreenIsSmall ? "100%" : "49%");
    }
</style>

============================

Issues:

1.

Selecting 100 when you have selected f.i.12 before will clear the list.

2. 

Sometimes selecting any value outside the visible items is selected only after another click on the same value

 

 

ADMIN
Hristian Stefanov
Posted on: 15 May 2024 13:56

Hi Paul,

Our latest version (6.0.0) has been released today, and it fixes this bug. Please upgrade and test it again.

Regards,
Hristian Stefanov
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Telerik family, check out our getting started resources!
Paul
Posted on: 15 May 2024 06:45
We experience still the same here in version 5.0
Patrik Madliak
Posted on: 27 Nov 2023 09:19

In version 5.0 is still reproducible.

https://blazorrepl.telerik.com/mxlFwHbI43ZFgTtt05

Create an account Log In
View
Type
Status
Category