location of pagination numbers

16 posts, 0 answers
  1. Edwin
    Edwin avatar
    6 posts
    Member since:
    Jan 2012

    Posted 08 Feb 2012 Link to this post

    Is there a way to move the list of pagination numbers to the top of the grid or to keep it visible when scrolling. If I make the grid small, it is easy to see the pagination numbers, but the detailTemplate requires a ton of scrolling. If I make the grid large, the user won't see the pagination numbers if their window is not tall enough.

  2. Dimo
    Admin
    Dimo avatar
    7586 posts
    Member since:
    Dec 2014

    Posted 09 Feb 2012 Link to this post

    Hello Edwin,

    I am afraid that configurable page numbers' position is not supported currently. However, if moving the page numbers to the top is a must, you can move the whole pager <div> after the Grid has been initialized:

    var grid = $("#grid");
    grid.find(".k-grid-pager").insertBefore(grid.children(".k-grid-content"));

    Greetings,
    Dimo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

  3. Drew
    Drew avatar
    15 posts
    Member since:
    Jul 2006

    Posted 28 Aug 2012 Link to this post

    I just posted a support ticket for this, and then saw this article.  What if I wanted to have the paging at both the top and bottom of the grid?  Is there a way to duplicate the div instead of moving it?

  4. Dimo
    Admin
    Dimo avatar
    7586 posts
    Member since:
    Dec 2014

    Posted 29 Aug 2012 Link to this post

    Hello Drew,

    You can use the following if scrolling is enabled:

    var grid = $("#grid").data("kendoGrid");
    var wrapper = $('<div class="k-pager-wrap k-grid-pager pagerTop"/>').insertBefore(grid.element.children(".k-grid-header"));
    grid.pagerTop = new kendo.ui.Pager(wrapper, $.extend({}, grid.options.pageable, { dataSource: grid.dataSource }));
    grid.element.height("").find(".pagerTop").css("border-width", "0 0 1px 0");

    ... and the following if scrolling is not enabled:

    var grid = $("#grid").data("kendoGrid");
    var wrapper = $('<div class="k-pager-wrap k-grid-pager pagerTop"/>').insertBefore(grid.element.children("table"));
    grid.pagerTop = new kendo.ui.Pager(wrapper, $.extend({}, grid.options.pageable, { dataSource: grid.dataSource }));
    grid.element.height("").find(".pagerTop").css("border-width", "0 0 1px 0");


    All the best,
    Dimo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

  5. Drew
    Drew avatar
    15 posts
    Member since:
    Jul 2006

    Posted 30 Aug 2012 Link to this post

    I actually didn't realize that the original poster was just looking for the pager controls only.  I wanted to duplicate the entire page control bar at the bottom of the grid.  I found that this works perfectly for me.  Let me know if this isn't a good way to accomplish this.

    $(function () {   
    var grid = $("#kGrid");
    grid.find(".k-grid-pager").clone().insertBefore(grid.children("table")).addClass("pagerTop").css("border-width", "0 0 1px 0");
    })

  6. Mark
    Mark avatar
    2 posts
    Member since:
    Sep 2012

    Posted 24 Sep 2012 Link to this post

    Hello,
    Is there a way to change the list of pagination numbers to the middle on the bottom instead of over to the left?
     

    Thanks

  7. mdelgert
    mdelgert avatar
    4 posts
    Member since:
    Dec 2010

    Posted 07 Nov 2012 Link to this post

    Is there way to achieve moving pagination location to top in MVC? The sample javascript code above does not work in MVC? 

  8. Dimo
    Admin
    Dimo avatar
    7586 posts
    Member since:
    Dec 2014

    Posted 08 Nov 2012 Link to this post

    Hello Matthew,

    Copying the pager behavior in the MVC Grid is not straightforward, because the implementation is different. You can clone the HTML markup in a similar way, however, then you will need to attach custom event handlers that will execute paging actions using the client API. Modifying the cloned pager markup manually (or cloning the pager again) in the Grid's dataBound / load event will also be required.

    Regards,
    Dimo
    the Telerik team

    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

  9. Dimo
    Admin
    Dimo avatar
    7586 posts
    Member since:
    Dec 2014

    Posted 08 Nov 2012 Link to this post

    P.S.

    If having only one pager is an option, then moving it from the bottom to the top of the Grid with CSS is a lot easier to implement, compared to cloning the pager to work both at the top and the bottom. You can execute the following code in OnLoad or OnDataBound:


    var gridElement = $("#Grid"),
        pager = gridElement.children(".t-grid-pager"),
        h = pager.outerHeight(),
        w = pager.outerWidth() - parseInt(pager.css("padding-left"), 10) - parseInt(pager.css("padding-right"), 10);
     
    gridElement.css("padding-top", h);
    pager.css({ position:"absolute", top:"0", left:"0", borderWidth: "0 0 1px", width: w });


    Greetings,
    Dimo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

  10. Drew
    Drew avatar
    15 posts
    Member since:
    Jul 2006

    Posted 08 Nov 2012 Link to this post

    Matthew,

    I am using the MVC wrapper for the Kendo Grid (see below for the js that I found to work to clone the pager row to the top of the grid).  I'm don't know about if you could use some sort of "move" jQuery command instead of the "clone" (maybe the appendTo would work?).  The key for me is this javascript needs to run after the grid has loaded and the grid's id must begin with "kGrid".  Note that the javascript below.  Hope this helps.  I'm no javascript expert, so I could be doing something wrong or not best practices, so this advice is worth what you paid for it. :-)

    <script type="text/javascript" language="javascript">
        $(function () {
            var grid = $('div[id^="kGrid"]');
            for (i = 0; i < grid.length; i++) {
                $("#" + grid[i].id).find(".k-grid-pager").clone().insertBefore($("#" + grid[i].id).children("table")).addClass("pagerTop").css("border-width", "0 0 1px 0");
            }
        })
    </script>

  11. mdelgert
    mdelgert avatar
    4 posts
    Member since:
    Dec 2010

    Posted 08 Nov 2012 Link to this post

    Hi Drew thank you for the sample code below. I added the suggested JavaScript and created a sample application at http://kendoui.apphb.com/Home/PersonAccount

    The pagination bar is duplication on the top of the KendUI grid but the child elements and items per page is disabled. The original pagination bar is working correctly at the bottom. Do you have any suggestions?

  12. Drew
    Drew avatar
    15 posts
    Member since:
    Jul 2006

    Posted 09 Nov 2012 Link to this post

    Wow, I see what you mean now. My application requires authentication, or I would link to it. Let me see if there's anything else I had to do to get it to work that I'm not remembering. What version are you using? I'm on Q2 SP2.

  13. mdelgert
    mdelgert avatar
    4 posts
    Member since:
    Dec 2010

    Posted 09 Nov 2012 Link to this post

    Hi Drew,

    I am using Version: 2012.2 913 (Sep 14, 2012)

    Telerik help support desk replied with the following.

    "Hello Matthew, The pager should be duplicated in the Grid's dataBound event. Currently this is done too early."

    They claim the JavaScript is being fired off too early. 

    What are your thoughts?

    Thanks,

    Matthew

  14. Drew
    Drew avatar
    15 posts
    Member since:
    Jul 2006

    Posted 09 Nov 2012 Link to this post

    After looking at your sample page again, they're right about it being fired off too early.

    Are you loading your data via AJAX?  If so, I can see why you would be having a problem (I'm not using an AJAX in my current app and I'm also not allowing the drop down to be able to the number of items displayed (10,20,30,etc) ... I force the user into n items).  However, I have a new project that I was planning on using AJAX in and I never thought about the fact that this may not work in that situation.  If it's AJAX, you would have to clone it after the initial load, but I don't know if would have to to refresh the cloned bar each time the data refreshes or not... In that case, I agree with Dimo that the implementation is much different and Telerik would know better about it than I do.

    I corrupted my VS install last night while cleaning out some apps that I thought I didn't need last night, so I'll be able to look back at my code better when I get that reinstalled...

  15. Noman Saleem
    Noman Saleem avatar
    2 posts
    Member since:
    May 2007

    Posted 15 May 2013 Link to this post

    Here is a working top and bottom pager for a ListView:

    function ListViewDataBound(e) {
        var listView = $('#ListView').data('kendoListView');
        var pager = $('#div .k-pager-wrap');
        var id = pager.attr('id') + '_top';
        if (listView.topPager == null) {
            var topPager = $('<div id="' + id + '" class=k-pager-wrap pagerTop" />').insertBefore('#ListView');
            listView.topPager = new kendo.ui.Pager(topPager, $.extend({}, listView.options.pageable, { dataSource: listView.dataSource }));
            listView.options.pagerId = id; // cloning the pageable options will use the id from the bottom pager
            listView.topPager.refresh(); // DataSource change event is not fired, so call this manually
            $('#' + id).css({ 'border-bottom': 'none', 'margin-bottom': 0 });
        }
    }

  16. Coupon
    Coupon avatar
    10 posts
    Member since:
    Sep 2013

    Posted 17 Sep 2013 Link to this post

    Here is the solution, which works for us.  These snippets use Angular-kendo.
    HTML code snippet:

            <div class="k-grid k-widget" kendo-grid id="k-grid"
                 k-groupable="true"
                 ...
                 k-on-data-binding="gridInit(kendoEvent)"></div>
    Controller code snippet:
        //TODO: clean up and move this DOM manipulation into a directive from controller code
        $scope.gridInit = function(e) {
            var grid = e.sender;    //grid object from kendo event
            // duplicate pager on the top of the grid
            var g = $("#k-grid"),    //grid object from jquery selector
                pager = $('#div .k-pager-wrap'), //regular bottom pager
                pagerTop = $("#pager_top");      //additional top pager
            if (pagerTop.length == 0) {
                var newPager = $('<div id="pager_top" class=k-pager-wrap pagerTop" />')
                    .insertBefore(g.find(".k-grouping-header")); //assumes that groupable is enabled
                g.topPager = new kendo.ui.Pager(newPager, $.extend({}, {'refresh':true,'pageSizes':true}, { dataSource: grid.dataSource }));
                g.topPager.refresh();
            }
        }
    It is a bit weird that I have two variables for the grid. 
    But after finding one combination, which works, I left it alone.

Back to Top