Grid Paging

The Grid component can page the entire data source automatically. Alternatively, you can hook to an event and fetch each page of data yourself.

In this article:

• Basics
• Events
• Pager Settings
• More Examples

Basics

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

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; } = 8;

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

Events

The Grid exposes several relevant events. You can find related examples in the Events article.

• PageChanged - you can use this to react to the user changing the page.
• PageSizeChanged - fires when the user changes the page size via the pager DropDownList.
• OnRead - you can use this to perform the read operation yourself on demand, instead of providing the entire data source at once. You can read more about this in the Manual Data Source Operations article.

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:

Attribute	Type and Default Value	Description
Adaptive	bool (true)	Whether pager elements should change based on the screen size. When enabled, the Pager will hide its Pager Info and PageSize Dropdownlist if they cannot fit in the available space. In the smallest resolution, the page buttons will be rendered as a select element.
ButtonCount	int (10)	The maximum number of page buttons that will be visible. To take effect, ButtonCount must be smaller than the page count (ButtonCount < Total / PageSize).
InputType	PagerInputType (Buttons)	Whether 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 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.
Position	PagerPosition enum (PagerPosition.Bottom)	The position of the Pager. The available options are Top and Bottom.

@*Configure the Pager Settings*@

<TelerikGrid Data="@MyData" Pageable="true" @bind-PageSize="@PageSize" @bind-Page="@CurrentPage">
    <GridSettings>
        <GridPagerSettings InputType="PagerInputType.Input"
                           PageSizes="@PageSizes"
                           ButtonCount="5"
                           Adaptive="true"
                           Position="PagerPosition.Top">
        </GridPagerSettings>
    </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.

• How to increase the pager dropdownlist width

See Also

• Live Demo: Grid Paging