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

If you want to bind the page index to a variable, you must use two-way binding - the @bind-Page="@MyPageIndexVariable" syntax. If you only use one-way binding - Page="@MyPageIndexVariable" - the grid will reset to the value of that parameter on every re-render. If you choose to use one-way binding, you must update the field value in the PageChanged event to avoid that.

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