ASP.NET Core Pager Overview

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.

• Demo page for the Pager HtmlHelper

• Demo page for the Pager TagHelper

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.

Razor

    @(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)
    )

Razor

    <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>

C#

    using Kendo.Mvc.Extensions;
    using Kendo.Mvc.UI;

    public class PagerController : Controller
    {
        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();
        }
    }

C#

    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—Control the Pager functions and rendering.
• Responsiveness—The Pager supports responsive design by default.
• Adaptive Mode—Enable the adaptive mode that changes the rendering of the Pager based on the screen resolution of the device.
• Templates—Customize the look and feel of the Pager.
• Globalization—Localize the texts and tooltips of the Pager.
• 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)

See Also

• Pager Client-Side API

• Pager Server-Side API

• Knowledge Base Section

• Razor Pages binding