Page Nevigation on Top and Bottom

3 posts, 0 answers
  1. Jimmy
    Jimmy avatar
    36 posts
    Member since:
    Jan 2019

    Posted 01 Mar 2019 Link to this post

    Hi

    I found some old sample code of placing page navigation on the top of the grid, but none work correctly when i have a ClientFooterTemplate in the grid.

    It show the footer template instead of the pager.

    Can anyone help?

            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");

     

  2. Tsvetomir
    Admin
    Tsvetomir avatar
    832 posts

    Posted 06 Mar 2019 Link to this post

    Hi Jimmy,

    I have noticed that the used selector grid.element.children("table")  target the content within the div HTML element which wraps the grid. The ClientFooterTemplate is prepended to all of the pagers within the grid. What I can suggest is to alternate the selector as follows:

    $(function () {
        var grid = $("#grid").data("kendoGrid");
        var wrapper = $('<div class="k-pager-wrap k-grid-pager pagerTop"/>').insertBefore(".k-grid");
        grid.pagerTop = new kendo.ui.Pager(wrapper, $.extend({}, grid.options.pageable, { dataSource: grid.dataSource }));
    })

    This would create a distinct pager widget right on top of the grid.


    Kind regards,
    Tsvetomir
    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. Jimmy
    Jimmy avatar
    36 posts
    Member since:
    Jan 2019

    Posted 06 Mar 2019 in reply to Tsvetomir Link to this post

    It Works! Thanks Tsvetomir!
Back to Top