Possibility to move and/or restyle the pagin buttons of a template grid

Is it possible to move and restyle the paging buttons that are on a template grid? We have a page as follows: And would like to style the buttons something like below (see bottom right): How would I got about moving these buttons (which is currently more important than the styling, but these buttons are not exactly ideal for tablet usage, and we do need the pages). Any suggestions on how to go about this?
2 answers

If you create a custom class for this type of page you can add this to it:

(yourcustomclass) .mx-grid-pagingbar {

position: fixed;
float: right;
bottom: 5px;
right: 5px;


That will put your buttons in the bottom right corner for you. You should also consider using a microflow and using current device type. This would allow you to put something with a smaller scroll area on a tablet specific page.


Hello Willem,

If by the paging bottom you mean the navigation buttons of the datagrid you coud use a snipet with the following code, where the .ClassAssignToDatagrid is the class that you assign to the datagrid in the modeler.

var content= document.querySelector(".ClassAssignToDatagrid .mx-grid-content");
var header =document.querySelector(".ClassAssignToDatagrid .mx-grid-pagingbar");
content.parentNode.insertBefore(header, content.nextSibling);

I am 100% sure it works on pages that are not mobile , but I have not tested it on mobile once