Last Updated: 02 Jan 2020 11:10 by ADMIN
Release 2.6.0
Created on: 04 Jun 2019 05:35
Category: Grid
Type: Bug Report
Pager items appearance is unclear with page numbers > 1000

When you have page numbers that go to 4 digits (>1000), the numbers get cramped up together and it is hard to tell which page you really are on.

Workaround - the CSS at the beginning of the snippet below. 

Reproducible - go to the last page on this sample and you will see the results attached below, if you have removed the workaround.

    /* The workaround */
    .k-pager-wrap.k-grid-pager .k-link, .k-pager-wrap.k-grid-pager .k-state-selected
        min-width: calc(10px + 1.4285714286em);
        width: auto;
@*The MCVE*@
@using Telerik.Blazor.Components.Grid
<TelerikGrid Data="@MyData" Height="300px" Pageable="true" PageSize="2" Sortable="true">
        <TelerikGridColumn Field="@(nameof(SampleData.Id))" />
        <TelerikGridColumn Field="@(nameof(SampleData.Name))" Title="Employee Name" />
        <TelerikGridColumn Field="@(nameof(SampleData.HireDate))" Title="Hire Date" />
@functions {
    public IEnumerable<SampleData> MyData = Enumerable.Range(1, 5000).Select(x => new SampleData
        Id = x,
        Name = "name " + x,
        HireDate = DateTime.Now.AddDays(-x)
    public class SampleData
        public int Id { get; set; }
        public string Name { get; set; }
        public DateTime HireDate { get; set; }
    //in a real case, consider fetching the data in an appropriate event like OnInitAsync
    //also, consider keeping the models in dedicated locations like a shared library
    //this is just an example that is easy to copy and run