location of pagination numbers

[Edwin]

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.

[Dimo]

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

[Support Team]

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?

[Dimo]

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

[Support Team]

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

})

[Mark]

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

[mdelgert]

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

[Dimo]

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

[Dimo]

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

[Support Team]

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>

[mdelgert]

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?

[Support Team]

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.

[mdelgert]

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

[Support Team]

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...

[Noman Saleem]

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

[Quotient]

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.

[Pham]

Hello Telerik team

 I use Kendo MVC and I have some issue. Can you know how to solve it.

1. Change toolbar to top of command column (Update, Delete

2. Change pager position to the right

3. Create new column Total = column Price * column Quantity.

I also attach image for more detail.

Thank you.

[Dimo]

Hi Pham,

1) The toolbar buttons cannot be moved, but you can add a custom button to the command column's header with a header template.

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-columns.headerTemplate

The button inside the header will need a click handler, which executes the addRow API method.

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-addRow


2) The pager layout can be reversed with CSS:

.k-grid .k-pager-wrap
{
  text-align: right;
  padding-right: 1.4em;
}

.k-grid .k-pager-wrap > .k-link,
.k-grid .k-pager-wrap > .k-pager-numbers
{
  display: inline-block;
  float: none;
  margin: 0 .2em;
  position: static;
}

.k-grid .k-pager-info
{
  position: absolute;
  left: 0;
}

3) is answered in another thread.


Regards,
Dimo
Telerik

 

 

[Balaram]

Hi Telerik Team,

We have requirement to have paging at both top and bottom of the grid. Above solutions are written in javascript, Is there a way to do the same in Angular 6/7 (Typescript)?

Thanks,

Balaram.

[Dimo]

Hi Balaram,

Is your question applicable for the Kendo UI Angular Grid (https://www.telerik.com/kendo-angular-ui/components/grid/). If yes, please post in the Kendo UI Angular Grid forum (https://www.telerik.com/forums/kendo-angular-ui/grid), or submit a technical support ticket for the respective product.

Thanks.

Regards,
Dimo
Progress Telerik

[Tom]

Folks,

Had this trick in our code but when migrating from 2020R-1 to 2022R-1 it appears to no longer function with the position parameter.  Seems like functions fine until the data is bound and then the pager moves to top OR bottom depending on how the position parameter is set. Is there a tweak to this trick to prevent this?

[Nikolay]

Hi Tom,

Since Kendo UI R2 2020 release there is a Grid Pager Position property and you can set the Pager on top of the Grid table.

• https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/pageable.position

If this does not help please share some more information:

 - Are you using the Kendo UI for jQuery?

 - What are you trying to achieve with the Grid Pager? Position it differently than the normal flow?

 

[Tom]

Hey Nikolay,

I know the position property exists but the problem is there is no BOTH option. My requirement is to have the pager at the top and the bottom. This trick used to work in 2020R-1. I am using UI for JQuery.

Any feedback would be appreciated.

Thanks again!

[Nikolay]

Hi Tom,

Please check the following article demonstrating how to Show Pager on Top and Bottom of the Grid:

https://docs.telerik.com/kendo-ui/knowledge-base/grid-show-pager-top-bottom

Let me know if this is what you are looking for.

[Tom]

Hey Nikolay,

I am doing this and seems to function on the initial grid build, with autobind false, but when I add data the data goes below both pagers. This behavior seems to be 'new' since Kendo UI R2 2020.

[Georgi Denchev]

Hello, Tom,

Could you please elaborate on what you mean by "when I add data"? Are you adding new records through the Grid's "Add New" button?

I've tested the functionality from the Knowledge Base article using both R2 2020 SP1 and the latest version, however I am unable to observe the problem:

Dojo(R2 2020) - https://dojo.telerik.com/@gdenchev/eSixelug 

Dojo(latest) - https://dojo.telerik.com/@gdenchev/UFuFAzed 

Could you modify either of these to demonstrate the issue that you're facing and then send them back?

Best Regards,

Georgi