Pager Template and Placement

[Andrew]

I am trying to use the grid and pagers, but I have some requirements to meet that I cannot find how to do.  I need to:

• Show a pager both at the top and bottom of the grid
• Have other controls (like a page size selector) next to the pager controls
• Have a "select exact page" dropdown as part of the pager formatted to look like the attached mockup.

How do I do this with the drid?  This is in .NET Core 3 Razor Pages

[Tsvetomir]

Hi Andrew,

I will go ahead and target the provided queries:

1. In order to set the pager both on top and bottom of the grid, I would recommend copying the default one.

    <script>
        $(function () {
            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");
        })
    </script>

2. In order to show the page sizes available, set it in the options:

    .Pageable(p=> {
        p.PageSizes(true);
    })

3. The DropDownList would be rendered by default in case the width is narrow. It comes as a part of the responsive design of the grid.

Let me know in case further assistance is required.

 

Best regards,
Tsvetomir
Progress Telerik