I need the pager to just show numbers, no hover animation, no next/last buttons, basically:
1 2 3 4 5 6 and so on.
How can I turn off the reset of the features? I've been trying to disable them CSS element by element, but it's like unravalling a big knot.
1 Answer, 1 is accepted
0
Accepted
Iliana Dyankova
Telerik team
answered on 17 Jul 2013, 02:30 PM
Hi Ian,
Basically you could remove next / last buttons via the Pager's configuration options (link). I.e.:
$("#grid").kendoGrid({
//....
pageable: {
previousNext: false
}
});
Keep in mind Kendo UI Widgets use primitives (i.e. different HTML elements in the widgets use the same CSS classes in order to allow common styling). Hence in order to achieve the expected result it is not necessary to change the CSS element by element. For example you could use the following CSS rules which should help to achieve the desired result:
<style>
.k-pager-wrap .k-link:hover,
.k-state-selected{
background: none;
border: none;
}
span.k-state-selected{
color: #2e2e2e;
}
.k-pager-numbers .k-state-selected{
border: none;
}
.k-pager-numbers .k-link{
padding: 0 7px;
}
.k-pager-numbers .k-link:hover{
line-height: 24px;
}
</style>
Regards,
Iliana Nikolova
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!