Pager HtmlHelper Overview

The Telerik UI Pager HtmlHelper for ASP.NET Core is a server-side wrapper for the Kendo UI Pager widget which enables splitting 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.

Telerik UI for ASP.NET Core Ninja image

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.

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.

        .Ajax(t=>t.Read(read => read.Action("People_Read", "Pager")).PageSize(20))

    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


You can subscribe to the Pager events.

        .Events(events => events
        function onChange(e){
            console.log("pager change event");

Referencing Existing Instances

To refer to an existing Pager instance use the method. Once a reference is established, use the Pager API to control its behavior.

    $(function() {
        // The Name() of the Pager is used to get its client-side instance.
        var pager = $("#pager").data("kendoPager");

See Also

In this article
Not finding the help you need? Improve this article