Gregory's Blog

Using the Kendo pager anywhere within a page.

The kendoPager is a beautiful widget that typically allows the user to navigate through a Kendo grid. It has fast forward and forward buttons to go to the first item and the previous item, displays the current page, which you can click to select another page, and forward and fast forward buttons to select the next and the last grid page. It is an intuitive control that is adaptive and themable.

Although there is no official documentation on this, we can also use this control in any page. You're not limited to only using this in the grid!

I'll show you my approach. You can see this Kendo pager in action by scrolling to the very bottom of this page below.

First create an element for the pager.
2) Create the datasource. Provide the URL in the pagerUrl element, and the page number.
3) Instantiate the pager control, and provide a change method. We will pass the complete datasource to the change method that we will invoke next.
4) Read the datasource to populate the kendoPager control.
5) Invoke the onPagerChange method, extract the values from the passed datasource, and redirect the user using javascript.

Here is the code:

view plain about
1<div id="pager" data-role="pager" class="k-pager-wrap k-widget k-floatwrap k-pager-lg">
2&lt;script>

3    // Create the datasource with the URL and page number.
4    var pagerDataSource = new kendo.data.DataSource({
5        data: [
6            { pagerUrl: "&startRow=0&page=1", page: "1" },
7            { pagerUrl: "&startRow=10&page=2", page: "2" },
8            { pagerUrl: "&startRow=20&page=3", page: "3" },
9            { pagerUrl: "&startRow=30&page=4", page: "4" }
10        ],
11        pageSize: 1,// Leave this at 1.
12        page: 4 // Specify the currently selected page using a server side language.
13    });
14
15    var pager = $("#pager").kendoPager({
16        dataSource: pagerDataSource,
17        // Pass the datasource to an onChange method outside of this function.
18        change: function() {
19            onPagerChange(this.dataSource.data());
20        }
21    }).data("kendoPager");
22    
23    // Read the datasource.
24    pagerDataSource.read();
25
26    // Extract passed data from the datasource and redirect the user.
27    function onPagerChange(data){
28        // Get the current page of the pager. The method to extract the current page is 'page()'.
29        var currentPage = pager.page();
30        // We are going to get the data item held in the datasource using its zero index array, but first we need to subtract 1 from the page value.
31        var index = currentPage-1;
32        // Get the url that is stored in the datsource using our new index.
33        var pagerUrl = "?" + data[index].pagerUrl;
34        // Open the page.
35        window.location.href = pagerUrl;
36    }
37&lt;/script>
38 </div>

This entry was posted on June 7, 2019 at 11:48 PM and has received 139 views.

There are currently 0 comments.




Your input and contributions are welcomed!

If you have an idea, BlogCfc based code, or a theme that you have built using this site that you want to share, please contribute by making a post here or share it by contacting us! This community can only thrive if we continue to work together.

Images and Photography:

Gregory Alexander either owns the copyright, or has the rights to use, all images and photographs on the site. If an image is not part of the "Gregory's Blog" open sourced distribution package, and instead is part of a personal blog post or a comment, please contact us and the author of the post or comment to obtain permission if you would like to use a personal image or photograph found on this site.

Credits:

Portions of Gregory's Blog are powered on the server side by BlogCfc, an open source blog developed by Raymond Camden. Revitalizing BlogCfc was a part of my orginal inspiration that prompted me to design this site. Some of the major open source contributers to BlogCfc include:

  1. Peter Farrell: the author of 'Lyla Captcha' that is used on this blog.
  2. Pete Freitag: the author of the 'ColdFish' code formatter that is also used on this blog.

Version:

Gregory's Blog Version 1.01 June 13, 2019 00:49 PST.