Customizing the Grid Pager's DropDown

Environment

Property	Value
Product	Telerik UI for ASP.NET MVC Grid
Version	2022.2.621

Description

I would like to customize the pagination drop-down in the Telerik UI for ASP.NET MVC Grid Grid footer to load all pages by default. How can I achieve this?

Solution

To customize the pagination drop-down in the Telerik UI for ASP.NET MVC Grid Grid footer to load all pages by default, follow these steps:

1. Hide the default pager by adding the following CSS code:

.k-grid-pager {
    display: none;
}

1. Implement a custom div element that will serve as the custom pager. For example:

<div id="customPager"></div>

1. In the document.ready scope, retrieve the dataSource instance of the Telerik UI for ASP.NET MVC Grid Grid.

2. Handle the dataBound Event of the Grid.

3. In the Event handler, Use the totalPages method of the dataSource to get the page count of the Grid.

4. Implement a DropDownList using the custom div element from step 2, with items ranging from 1 to the page count obtained in step 4.

5. Attach a change event handler to the DropDownList.

6. In the event handler, retrieve the current value of the DropDownList and set it as the current page of the Grid using the page method of the dataSource.

Here is an example implementation:

<!-- Custom div element for our pager and hiding the default one -->
<div id="customPager"></div>

<style>
    .k-grid-pager {
        display: none;
    }
</style>

<script>
$(document).ready(function () {
    var grid = $("#grid").data("kendoGrid");

    // Attach an event handler to the dataBound event
    grid.bind("dataBound", function(e) {
        var pages = e.sender.dataSource.totalPages();
        var ddlData = [];

        for (var i = 1; i <= pages; i++) {
            ddlData.push(i);
        }

        // Check if the dropdown is already initialized to avoid re-initializing
        var customPager = $("#customPager").data("kendoDropDownList");
        if (!customPager) {
            $("#customPager").kendoDropDownList({
                dataSource: ddlData,
                change: onChange
            });
        } else {
            // If already initialized, just update its data
            customPager.setDataSource(ddlData);
            customPager.refresh();
        }
    });
});

function onChange() {
    var ddl = this;
    var currPage = ddl.value();
    var grid = $("#grid").data("kendoGrid");
    grid.dataSource.page(currPage);
}
</script>

REPL examples

• HtmlHelper
• TagHelper

More ASP.NET MVC Grid Resources

• ASP.NET MVC Grid Documentation

• ASP.NET MVC Grid Demos

• ASP.NET MVC Grid Product Page

• Telerik UI for ASP.NET MVC Video Onboarding Course (Free for trial users and license holders)
• Telerik UI for ASP.NET MVC Forums

See Also

• Client-Side API Reference of the Grid for ASP.NET MVC
• Server-Side API Reference of the Grid for ASP.NET MVC
• Telerik REPL: Change the Grid Pager to a Slider
• Telerik UI for ASP.NET MVC Breaking Changes
• Telerik UI for ASP.NET MVC Knowledge Base