New to Telerik UI for Blazor? Download free 30-day trial

Grid Paging

The Grid component supports paging.

  • To enable paging, set the Grid Pageable parameter to true.
  • Set the number of items rendered at once with the PageSize parameter (defaults to 10).
  • If needed, set the current page of the Grid through its integer Page property.
  • You can further customize the pager interface via additional pager settings.

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());
        }
    }
}

Pager Settings

In addition to Page and PageSize, the Grid provides advanced pager configuration options via the GridPagerSettings tag, which is nested inside GridSettings. These configuration attributes include:

  • ButtonCount - int - The maximum number of page buttons that will be visible. To take effect, ButtonCount must be smaller than the page count (ButtonCount < Total / PageSize). The default value is 10.
  • InputType - PagerInputType - Determines if the pager will show numeric buttons to go to a specific page, or a textbox to type the page index. The arrow buttons are always visible. The PagerInputType enum accepts values Buttons (default) or Input. When Input is used, the page index will change when the textbox is blurred, or when the user hits Enter. This is to avoid unintentional data requests.
  • PageSizes - List<int?> - Allows users to change the page size via a DropDownList. The attribute configures the DropDownList options. A null item in the PageSizes List will render an "All" option. By default, the Pager DropDownList is not displayed. You can also set PageSizes to null programmatically to remove the DropDownList at any time.
<TelerikGrid Data="@MyData" Pageable="true" @bind-PageSize="@PageSize" @bind-Page="@CurrentPage">
    <GridSettings>
        <GridPagerSettings InputType="PagerInputType.Input" PageSizes="@PageSizes" ButtonCount="5" />
    </GridSettings>
    <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 });

    int PageSize { get; set; } = 15;
    int CurrentPage { get; set; } = 3;
    protected List<int?> PageSizes { get; set; } = new List<int?> { 15, 30, null };
}

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