Duplicated
Last Updated: 15 Oct 2020 11:55 by ADMIN
Paul
Created on: 26 Jun 2020 08:57
Category: Grid
Type: Feature Request
13
Add Page Size selector in the Grid Footer
I would like to give my users the opportunity to select the number of rows rendered in the Grid with a dropdown page size selector, located in the Grid footer.
Duplicated
This item is a duplicate of an already existing item. You can find the original item here:
1 comment
ADMIN
Svetoslav Dimitrov
Posted on: 26 Jun 2020 10:22

Hello Paul,

For the time being I would suggest you use the GridToolbar, add the DropDownList there and integrate a Pager. I have created a sample code snippet, which you can see below:

<style>
    .k-pager-wrap.k-grid-pager {
        display: none;
    }
</style>

<TelerikGrid Data="@MyData"
             Pageable="true"
             @bind-Page="@CurrentPage"
             Height="400px"
             PageSize="@PageSize">
    <GridToolBar>
        Select Page Size: <TelerikDropDownList Data="@PageSizesList" @bind-Value="@PageSize" Width="60px" />
        <TelerikPager Total="@MyData.Count()" @bind-Page="@CurrentPage" PageSize="@PageSize" />
    </GridToolBar>
    <GridColumns>
        <GridColumn Field="@(nameof(SampleData.Id))" Width="120px" />
        <GridColumn Field="@(nameof(SampleData.Name))" Title="Employee Name" Groupable="false" />
        <GridColumn Field="@(nameof(SampleData.Team))" Title="Team" />
        <GridColumn Field="@(nameof(SampleData.HireDate))" Title="Hire Date" />
    </GridColumns>
</TelerikGrid>

@code {
    public int PageSize { get; set; } = 10;
    public int CurrentPage { get; set; } = 1;

    protected List<int> PageSizesList = new List<int>() { 5, 10, 20, 25, 30 };

    public IEnumerable<SampleData> MyData = Enumerable.Range(1, 60).Select(x => new SampleData
    {
        Id = x,
        Name = "name " + x,
        Team = "team " + x % 5,
        HireDate = DateTime.Now.AddDays(-x).Date
    });

    public class SampleData
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Team { get; set; }
        public DateTime HireDate { get; set; }
    }
}

Regards,
Svetoslav Dimitrov
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.