Generic Kendo Pagination on page (non grid?)

[gregory]

Is there a slimmed down paging available for sites that have large amounts of content that are not within a Kendo grid control? I would like to use the same paging control that I use in the grids at the bottom of long pages. I want to use one at the end of my blog site (http://gregoryalexander.com/blogCfc/client/?reinit=1&theme=silver)

Please advise, I spent around 30 minutes and could not find anything specific on the web. 

[Dimitar]

Hi Gregory,

Kendo UI Pager is used for managing paging over the DataSource, as described in its datasource api article. There is no standalone pager working without datasource. I would suggest you to consider using ListView with template and Pager to display articles preview.

Best regards,
Dimitar
Progress Telerik

[gregory]

Thanks Dimitar, 

I was hoping for a stand alone pager, and could not find one. Thank-you for the clarification. Do you think that it is possible to inspect the pagers with Chrome dev tools and create my own?

[Dimitar]

Hi Gregory,

I see in the blog that you have buttons for paging. I would suggest you to create a Kendo UI Pager in a Dojo and configure it to look as required for the blog. Then copy the HTML of the generated Kendo UI Pager from Chrome dev tools and apply the paging logic from the current blog paging to the Pager elements. Here is a sample Dojo snippet, showing this in action - full-screen Dojo URL. The first pager is a dummy one, a copy-paste of the HTML generated by the real Pager. It looks the same, as it has the same elements and CSS classes applied to them. Then you may further customize the dummy pager elements, by removing unnecessary attributes or adding new ones. I hope this will help you to achieve the desire result.

Regards,
Dimitar
Progress Telerik

[gregory]

Cool Dimitar,
I'll try it out!

[gregory]

Thanks Dimitar,

I took your example and am using the following approach:

<div id="pager" data-role="pager" class="k-pager-wrap k-widget k-floatwrap k-pager-lg">
&lt;script>
    // Create the datasource with the URL
    var pagerDataSource = new kendo.data.DataSource({
        data: [
            { pagerUrl: "&startRow=0&page=1", page: "1" },
            { pagerUrl: "&startRow=10&page=2", page: "2" },
            { pagerUrl: "&startRow=20&page=3", page: "3" },
            { pagerUrl: "&startRow=30&page=4", page: "4" }
        ],
        pageSize: 1,// Leave this at 1.
        page: 4
    });

    var pager = $("#pager").kendoPager({
        dataSource: pagerDataSource,
        // Pass the datasource to an onChange method outside of this function.
        change: function() {
            onPagerChange(this.dataSource.data());
        }
    }).data("kendoPager");
    
    // Read the datasource. 
    pagerDataSource.read();

    // Extract passed data from the datasource and redirect the user.
    function onPagerChange(data){
        // Get the current page of the pager. The method to extract the current page is 'page()'.
        var currentPage = pager.page();
        // 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.
        var index = currentPage-1;
        // Get the url that is stored in the datsource using our new index.
        var pagerUrl = "?" + data[index].pagerUrl;
        // Open the page.
        window.location.href = pagerUrl;
    }
&lt;/script>
</div>

 

See: http://gregoryalexander.com/blog/index.cfm/2019/6/7/Using-the-Kendo-pager-anywhere-in-a-page

[Dimitar]

Hi Gregory,

Thank you for sharing this solution with the community.

Best regards,
Dimitar
Progress Telerik