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

Pager with numbers only (no hover images)

1 Answer 256 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Ian
Top achievements
Rank 2
Ian asked on 15 Jul 2013, 08:16 PM
I have an MVC Grid with Paging enabled.

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

Sort by
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!
Tags
Grid
Asked by
Ian
Top achievements
Rank 2
Answers by
Iliana Dyankova
Telerik team
Share this question
or