This is a migrated thread and some comments may be shown as answers.

Generic Kendo Pagination on page (non grid?)

6 Answers 178 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
gregory
Top achievements
Rank 1
gregory asked on 13 Mar 2019, 05:31 PM

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. 

6 Answers, 1 is accepted

Sort by
0
Accepted
Dimitar
Telerik team
answered on 15 Mar 2019, 02:10 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
gregory
Top achievements
Rank 1
answered on 16 Mar 2019, 12:25 AM

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?

0
Accepted
Dimitar
Telerik team
answered on 18 Mar 2019, 09:45 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
gregory
Top achievements
Rank 1
answered on 18 Mar 2019, 08:29 PM
Cool Dimitar,
I'll try it out!
0
gregory
Top achievements
Rank 1
answered on 08 Jun 2019, 08:07 AM

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

0
Dimitar
Telerik team
answered on 10 Jun 2019, 09:34 AM
Hi Gregory,

Thank you for sharing this solution with the community.

Best regards,
Dimitar
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
General Discussions
Asked by
gregory
Top achievements
Rank 1
Answers by
Dimitar
Telerik team
gregory
Top achievements
Rank 1
Share this question
or