Paging template

[Peruri]

Hello Telerik team,
I am evaluating Kendo Web. I have a requirement to template the pager buttons look and feel.  I would like to change the Grid page buttons from circle to squares and also make them much bigger for touch friendly.

Where do I look to modify them?  Is this in the CSS or , templating concept?

Thanks,
Peruri

[Iliana Dyankova]

Hello Peruri,

In order to change the default styling of the Kendo UI Pager you need a custom CSS and the widget's specific classes. For example to change the grid's page buttons from circle to squares you could remove the border-radius property. Like here:

.k-pager-numbers .k-link,
.k-pager-numbers .k-link:hover,
.k-pager-numbers .k-state-selected{
  border-radius: 0;
}

.k-pager-wrap > .k-link {
 border-radius: 0;
}

I hope this helps.


Kind regards,
Iliana Nikolova
the Telerik team

[Admin]

Works great thanks!

 

[Pham]

Hello Telerik team, 

I want to change grid Pager position from left align to right align.

 I  use to it won't work. Can you help me.

This is my

<>
    -pager-wrap k-grid-pager
    {

        -contentcenter;
        -alignright;
        -itemscenter;
    }

</>

 

Thank you

[Dimo]

Hello Pham,

Please do not post the same question in multiple forum threads.

Regards,
Dimo
Telerik

 

 

[Jacques]

I do not see how see how Pham's and Peruri's questions are the same. One asks about changing the shape, and the other talks about changing position. I also had both of these issues, and my solution to the pagers seemed inefficient and not a whole lot of fun to do. Unless Pham's question is answered elsewhere, could you please answer his question/put it on a new post? What I found particularly annoying about it was the fact that the last page, next page, prev page and first page buttons were not in a div with the k-pager-numbers buttons, and instead were located in the entire k-grid-pager complex, just murking about. So I ended up having to move the last page and buttons of that type INDIVIDUALLY and then was supposed to come up with a way that 'magically' aligned them properly with the number buttons (not fun at all, might I add). So PLEASE do not ignore his question. Either answer it somewhere else/give me a link to this question if it is already answered. I had an unpleasant time inspecting all of the kendo elements and am always angered when I find that modifying the css of one class does not change the element how I expected, and then I have to play hide and seek with all the elements until I find the right one. This is a major reason as to why I dislike using kendo-ui. The elements are masked in a multitude of unnecessary classes and it always a chore to change the styling of it, even something as simple as changing the border-radius or moving a group of objects to a different location. I tried every other grid out there, and unfortunately they had some issues that I could not overlook. What I liked about them was that they were easy to customize, whereas kendo is typically not. However, for the time being, I must use kendo since its core functionalities are intact, yet i will definitely use other modules once ui-grid is up and running and maybe even once ag-grid becomes less buggy. My suggestion: make your code easier to understand/provide more features that users can use to easily change the layout of what ever widget. If you guys could make the pager to work on the left side, why not put an option for it to work on the right!? Seriously annoying. Either let your customers do it or do it for them; don't try and make it nearly impossible to reface your product when all we want is the core functionality and ease of customization. Sure, your default stylings are great, but not everyone wants to use your pre-styled themes over and over, we want to be able to change them easily! And no, your theme builder is most definitely NOT sufficient. It hides more than it reveals, thus still making our lives harder! Please fix this and maybe someday I will consider you guys for my own projects, but until then I will simply avoid all of your products until they are simpler and easier to use. No-one cares that you have a `k-grid-pager span ul li a' that when selected changes into a `span`? What were you guys thinking? just disable the darn link when selected and move on with your lives! It creates major problems when modifying the size of the pager buttons! Gaaaah!!!! These workarounds are getting tiring and will most likely be the reason why people stop using your products! Ok, I'm done, but PLEASE answer my question! People need to know how to do this since it can not yet be done easily.

[Dimo]

Hello Jacques,

Pham's question is surely not the same as Peruri's, but it's offtopic here and also, it duplicates another one in another forum thread.

http://www.telerik.com/forums/location-of-pagination-numbers#v8vApTCZyUiUHE2sq8oPiA

Regards,
Dimo
Telerik

 

 

[Manuel]

So much complaining when you even use the product for free.. :D

[Jenny]

How to remove the button showing with "..." tool tips say "more pages" from the Kendo.UI.Grid pager?  

[Jenny]

How to remove this button called "more pages" from the Kendo.UI.Grid?  I do see that pager js is adding this button...

[Dimo]

Hi Jenny,

The "More pages" buttons (there can be two of them) can be removed programmatically in the dataBound event of the Grid. You will also need setTimeout, because the pages itself is constructed in dataBound too.

dataBound: function(e){
  setTimeout(function(){
      e.sender.wrapper.children(".k-grid-pager").find("[title='More pages']").hide();
  });
}

https://dojo.telerik.com/oZegI

The above example relies on:

dataBound event
https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/events/databound

e.sender argument
https://docs.telerik.com/kendo-ui/intro/widget-basics/events-and-methods#event-handler-arguments

wrapper field
https://docs.telerik.com/kendo-ui/intro/widget-basics/wrapper-element

The "More pages" buttons have no special CSS class, that's why an attribute selector is used.

I am not sure about the specific use case, but generally, removing these buttons can hinder and slow down page navigation.

Regards,
Dimo
Progress Telerik