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
- To enable paging, set the Grid
Pageableparameter totrue. - Set the number of items rendered at once with the
PageSizeparameter (defaults to 10). - If needed, set the current page of the Grid through its integer
Pageproperty. - 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 thePageChangedevent 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:
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.