20 Answers, 1 is accepted
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
Rank 1
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
Rank 1
$(function () { var grid = $("#kGrid");grid.find(".k-grid-pager").clone().insertBefore(grid.children("table")).addClass("pagerTop").css("border-width", "0 0 1px 0");})
Rank 1
Is there a way to change the list of pagination numbers to the middle on the bottom instead of over to the left?
Thanks
Rank 2
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
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
Rank 1
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>
Rank 2
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?
Rank 1
Rank 2
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
Rank 1
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...
Rank 1
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 }); }}
Rank 1
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.
Rank 1
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.
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
Rank 1
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.
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
Rank 1
Iron
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?
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.
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?
Rank 1
Iron
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!
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.
Rank 1
Iron
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.
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