This is a migrated thread and some comments may be shown as answers.

Reorder elements in the Grid Pager

7 Answers 194 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Quotient
Top achievements
Rank 1
Quotient asked on 27 Feb 2014, 07:39 PM
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

7 Answers, 1 is accepted

Sort by
0
Atanas Korchev
Telerik team
answered on 03 Mar 2014, 01:20 PM
Hi,

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

Regards,
Atanas Korchev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Quotient
Top achievements
Rank 1
answered on 04 Mar 2014, 09:27 PM
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
0
Atanas Korchev
Telerik team
answered on 05 Mar 2014, 09:07 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Quotient
Top achievements
Rank 1
answered on 05 Mar 2014, 08:31 PM
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. 
0
Quotient
Top achievements
Rank 1
answered on 05 Mar 2014, 08:34 PM
here is a screen shot from jsbin
0
Atanas Korchev
Telerik team
answered on 06 Mar 2014, 07:09 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Quotient
Top achievements
Rank 1
answered on 07 Mar 2014, 07:03 PM
Thank you Atanas! 
Works nicely.
Tags
Grid
Asked by
Quotient
Top achievements
Rank 1
Answers by
Atanas Korchev
Telerik team
Quotient
Top achievements
Rank 1
Share this question
or