Edit this page

Place Pagers at Top and Bottom of the ListView


Product Progress Kendo UI ListView for ASP.NET MVC (version 2017.2 504)
Progress Kendo UI version 2017.2 504
Visual Studio version Visual Studio 2015
MVC Version MVC 5
View Engine Razor


I have a ListView with a pager at the bottom that works as expected. How can I have a pager both at the top and bottom of the widget?

Suggested Workarounds

The Kendo UI ListView for ASP.NET MVC does not provide a built-in solution for achieving this behavior.

However, you can still work around this issue by applying custom logic to the:

ListView Widget

The following example demonstrates how to customize the default behavior of the ListView widget and implement a pager at its top and bottom.

<!DOCTYPE html>
    <base href="https://demos.telerik.com/kendo-ui/listview/index">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.504/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.504/styles/kendo.material.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.504/styles/kendo.material.mobile.min.css" />

    <script src="https://kendo.cdn.telerik.com/2017.2.504/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2017.2.504/js/kendo.all.min.js"></script>
<div id="example">

    <script src="../content/shared/js/products.js"></script>

    <div class="demo-section k-content wide">
        <div id="pager1" class="k-pager-wrap"></div>
        <div id="listView"></div>
        <div id="pager2" class="k-pager-wrap"></div>

    <script type="text/x-kendo-template" id="template">
        <div class="product">

        $(function() {
            var dataSource = new kendo.data.DataSource({
                data: products,
                pageSize: 21

                dataSource: dataSource
                dataSource: dataSource

                dataSource: dataSource,
                template: kendo.template($("#template").html())

ListView Wrapper

To add a pager to an MVC ListView wrapper, apply the same configuration approach in regard to the page at the top. The aim is to initialize another pager through a jQuery initialization within document ready and pass the dataSource of the ListBox.

The following example demonstrates how to customize the default behavior of the ListView wrapper and implement a pager at its top and bottom.

<div id="pager1" class="k-pager-wrap"></div>
    $(function() {
        var listView = $("#listView").data("kendoListView");
            dataSource: listView.dataSource
Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article