Generic Kendo Pagination on page (non grid?)

7 posts, 2 answers
  1. gregory
    gregory avatar
    40 posts
    Member since:
    Jun 2006

    Posted 13 Mar Link to this post

    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. 

  2. Answer
    Dimitar
    Admin
    Dimitar avatar
    422 posts

    Posted 15 Mar Link to this post

    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.
  3. gregory
    gregory avatar
    40 posts
    Member since:
    Jun 2006

    Posted 15 Mar in reply to Dimitar Link to this post

    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?

  4. Answer
    Dimitar
    Admin
    Dimitar avatar
    422 posts

    Posted 18 Mar Link to this post

    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.
  5. gregory
    gregory avatar
    40 posts
    Member since:
    Jun 2006

    Posted 18 Mar in reply to Dimitar Link to this post

    Cool Dimitar,
    I'll try it out!
  6. gregory
    gregory avatar
    40 posts
    Member since:
    Jun 2006

    Posted 08 Jun in reply to gregory Link to this post

    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

  7. Dimitar
    Admin
    Dimitar avatar
    422 posts

    Posted 10 Jun Link to this post

    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.
Back to Top