Edit this page

Place Pagers at Top and Bottom of the ListView

Environment

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

Description

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>
<html>
<head>
    <base href="https://demos.telerik.com/kendo-ui/listview/index">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <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>
</head>
<body>
<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>
    </div>

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

    <script>
        $(function() {
            var dataSource = new kendo.data.DataSource({
                data: products,
                pageSize: 21
            });

            $("#pager1").kendoPager({
                dataSource: dataSource
            });
            $("#pager2").kendoPager({
                dataSource: dataSource
            });

            $("#listView").kendoListView({
                dataSource: dataSource,
                template: kendo.template($("#template").html())
            });
        });
    </script>
</div>
</body>
</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>
@(Html.Kendo().ListView<Kendo.Mvc.Examples.Models.ProductViewModel>()
    .Name("listView")
    .TagName("div")
    ...
    ...
    .Pageable()
)
</div>
<script>
    $(function() {
        var listView = $("#listView").data("kendoListView");
        $("#pager1").kendoPager({
            dataSource: listView.dataSource
        });
    });
</script>
Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy