Completed
Last Updated:
02 Jan 2020 11:10
by ADMIN
Release 2.6.0
Nick
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.
<style> /* 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; }</style>@*The MCVE*@@using Telerik.Blazor.Components.Grid<TelerikGrid Data="@MyData" Height="300px" Pageable="true" PageSize="2" Sortable="true"> <TelerikGridColumns> <TelerikGridColumn Field="@(nameof(SampleData.Id))" /> <TelerikGridColumn Field="@(nameof(SampleData.Name))" Title="Employee Name" /> <TelerikGridColumn Field="@(nameof(SampleData.HireDate))" Title="Hire Date" /> </TelerikGridColumns></TelerikGrid>@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}Attached Files:
0 comments