Customize Pageable Label Options

[jeff]

Hi folks!
For 'continuities sake', I need to customize the Grid pageable: options - do I need to edit the js library itself to modify the layout (I REALLY don't want to have to do that..), or is there a method to modifying the pageable template?

Currently, the kendo ui pagination is:

go to first page / go to the previous page / page numbers / go to next page / go to last page

we just want a single 'previous' button and a single 'next' button, with text labels instead of glyphs.. 

previous / page numbers / next

Thank you!

[Dimiter Madjarov]

Hello Jeff,


The scenario is not supported out of the box. It could be achieved by applying custom CSS styles and modifying the existing ones via jQuery. Here is a sample approach that you could use as a base and modify manually if needed. In the example I am hiding the first/last buttons

.k-pager-first, .k-pager-last {
    display:none;
}

and modifying the prev/next buttons via jQuery.

Regards,
Dimiter Madjarov
Telerik

 

 

[jeff]

That definitely got me in the ballpark, thank you very much. If one ever finds themselves in this situation, here's what I ended up doing to get it a little closer:

01.var pager = $("#grid .k-grid-pager");
02.
03.pager.find(".k-pager-nav").eq(1)
04..find("span").text("Previous")
05..removeClass("k-icon")
06..parent().css({
07.    'padding' : '0 6px',
08.    'border-radius' : '4px 0 0 4px',
09.    'text-decoration' : 'none'
10.});
11.
12.pager.find(".k-pager-nav").eq(2)
13..find("span").text("Next")
14..removeClass("k-icon")
15..parent().css({
16.    'padding' : '0 6px',
17.    'border-radius' : '0 4px 4px 0',
18.    'border-right-color' : '#cccccc',
19.    'border-right-style' : 'solid',
20.    'border-right-width' : '1px',
21.    'text-decoration' : 'none'
22.});

[Dimiter Madjarov]

Hello Jeff,

Thanks for the update. I am glad the issue is resolved.

Regards,
Dimiter Madjarov
Telerik