Grid Paging

The Grid component offers support for paging.

To enable paging, set its Pageable property to true.

You can control the number of records per page through the PageSize property.

You can set the current page of the grid through its integer Page property.

Enable paging in Telerik Grid

Enable paging and start on the second page.

<TelerikGrid Data="@MyData" Pageable="true" PageSize="15" Page="2" Height="500px">
    <GridColumns>
        <GridColumn Field="ID"></GridColumn>
        <GridColumn Field="TheName" Title="Employee Name"></GridColumn>
    </GridColumns>
</TelerikGrid>

@code {
    public IEnumerable<object> MyData = Enumerable.Range(1, 50).Select(x => new { ID = x, TheName = "name " + x });
}

The result from the code snippet above

You can bind the values of those properties to variables in the @code {} section. If you want to bind the page index to a variable, you must use the @bind-Page="@MyPageIndexVariable" syntax.

Here is one way to implement a page size choice that puts all records on one page.

Bind Page Size to a variable

Dynamic page size change

<select @onchange=@ChangePageSize>
    @for (int i = 1; i < 4; i++)
    {
        <option value=@(i*10)>@(i * 10)</option>
    }
    <option value="all" selected>all</option>
</select>

<TelerikGrid Data="@MyData" Pageable="true" PageSize="@PageSize">
    <GridColumns>
        <GridColumn Field="ID"></GridColumn>
        <GridColumn Field="TheName" Title="Employee Name"></GridColumn>
    </GridColumns>
</TelerikGrid>

@code {
    public IEnumerable<object> MyData = Enumerable.Range(1, 50).Select(x => new { ID = x, TheName = "name " + x });

    protected int PageSize { get; set; }

    protected void ChangePageSize(ChangeEventArgs e)
    {
        if (e.Value.ToString().ToLowerInvariant() == "all")
        {
            PageSize = MyData.Count();
        }
        else
        {
            PageSize = int.Parse(e.Value.ToString());
        }
    }
}

More Examples

The following articles and sample projects can be helpful when implementing paging:

  • Capture PageChanged event

  • Server Paging - this article explains how to implement manual data source operations so you can offload the work to the server. It provides the overview of how to setup the grid for that, and examples - several with local data and links a repository with examples using REST API endpoints.

See Also

In this article
Not finding the help you need? Improve this article