Reorder elements in the Grid Pager

[Quotient]

Hi, 
Is there a way to reorder elements in the pager.
For example the "message" (i.e. "1 - 10 of 2000 items") should be on the left; pageSizes, page buttons, and page input all floated to the right. 
I found how to configure each element in http://docs.telerik.com/kendo-ui/api/web/grid#configuration-pageable, but don't see a way to control the order or use a template. If there is a way to do this via jquery, would you please provide an example. 
Thanks!
-Pavel

[Atanas Korchev]

Hi,

This can be achieved with some JavaScript and CSS: http://jsbin.com/xutucija/2/edit

Regards,
Atanas Korchev
Telerik

[Quotient]

Thank you Atanas!
The idea is clear. Unfortunately the order of the link buttons is reversed in this example. Would you recommend a better solution than using .insertBefore(...) for each individual button?
-Pavel

[Atanas Korchev]

Hi,

I am not sure I understand. The order of the buttons seems correct to me (check the attached screenshot). Could you please clarify what you mean?

Regards,
Atanas Korchev
Telerik

[Quotient]

I see. Since I need the buttons and input to be aligned to the right side of the paging bar, I tried:
.k-grid-pager .k-link,
.k-grid-pager .k-pager-numbers,
.k-grid-pager .k-pager-input,
.k-grid-pager .k-pager-sizes {
  float: right;
}
which reversed the order of the buttons. 
"text-align" does not seem to work well in this case either.
I wish there was a way to provide a template to the whole paging bar. Or to have a wrapper element around all k-link elements. 

[Quotient]

here is a screen shot from jsbin

[Atanas Korchev]

Hello,

Indeed this is how float:right behaves - it reverses the order of elements. I would suggest a different way to align the buttons to the right - using text-align:right: http://jsbin.com/xutucija/6/edit

.k-grid-pager .k-link,
.k-grid-pager .k-pager-numbers {
  float: none;
}

.k-pager-info {
  float:left;
  padding: 0;
}

.k-grid-pager {
  text-align: right;
}

Regards,
Atanas Korchev
Telerik

[Quotient]

Thank you Atanas! 
Works nicely.