ASP.NET Core Pager Overview
The Pager is part of Telerik UI for ASP.NET Core, a
professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
The Telerik UI Pager TagHelper and HtmlHelper for ASP.NET Core are server-side wrappers for the Kendo UI Pager widget. To add the component to your ASP.NET Core app, you can use either.
The Pager enables you to split a set of data into pages with flexible and intuitive UI. The user interface of the Pager is useful for paging data-bound components that have a data source and do not have a built-in UI for paging such as the ListView or scenarios that require paging options—for example, Kendo Templates with a data source.
You can customize the page number templates or use an input for navigation to a specific page, toggle the visibility of previous and next buttons, include a pagesize dropdown and alter the information messages. The pager API also offers the ability to localize its messages.
Initializing the Pager
To use the Pager, you have to define a standalone data source and pass it by name to the Pager and to the data-bound control that will use it.
The following example demonstrates how to tie a pager to a data source and enable the PageSizes() functionality.
@(Html.Kendo().DataSource<Kendo.Mvc.Examples.Models.OrderViewModel>()
.Name("dataSource1")
.Ajax(t=>t.Read(read => read.Action("People_Read", "Pager")).PageSize(20))
)
@(Html.Kendo().Pager()
.Name("pager")
.DataSource("dataSource1")
.PageSizes(true)
)
<kendo-datasource name="dataSource1" type="DataSourceTagHelperType.Ajax" server-operation="false">
<transport>
<read url="@Url.Action("TagHelper_Products_Read", "DataSource")" />
</transport>
</kendo-datasource>
<kendo-pager name="pager1" refresh="true" datasource-id="dataSource1" page-sizes="true">
</kendo-pager>
using Kendo.Mvc.Extensions;
using Kendo.Mvc.UI;
public class PagerController : BaseController
{
public IActionResult People_Read([DataSourceRequest]DataSourceRequest request)
{
var people = new List<SampleData>() {
new SampleData() { Name = "Jane Doe", Age = 25, IsOnLeave = false },
new SampleData() { Name = "John Doe", Age = 33, IsOnLeave = true },
new SampleData() { Name = "John Smith", Age = 37, IsOnLeave = true },
new SampleData() { Name = "Nathan Doe", Age = 42, IsOnLeave = false }
};
return Json(people.ToDataSourceResult(request));
}
public IActionResult Index()
{
return View();
}
}
public class SampleData
{
public int Age { get; set; }
public string Name { get; set; }
public bool IsOnLeave { get; set; }
}
Functionality and Features
- Pager Settings and Types—You can choose between the available settings and types.
- Responsive Pager—The Pager supports responsive design by default.
- Pager Templates—Customize the look and feel of the Pager with Kendo Templates.
- Globalization and Messages—The globalization process combines the translation of component messages (localization) with adapting them to specific cultures (internationalization and right-to-left support).
- Accessibility—The Pager is accessible by screen readers and provides WAI-ARIA, Section 508, WCAG 2.2, and keyboard support.
Next Steps
- Getting Started with the Pager
- Basic Usage of the Pager HtmlHelper for ASP.NET Core (Demo)
- Pager HtmlHelper Integration for ASP.NET Core(Demo)