Paging template

11 posts, 0 answers
  1. Peruri
    Peruri avatar
    5 posts
    Member since:
    May 2011

    Posted 23 Jul 2012 Link to this post

    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
  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 26 Jul 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Mike
    Mike avatar
    27 posts
    Member since:
    Oct 2007

    Posted 28 Jun 2013 Link to this post

    Works great thanks!

     

  4. Pham
    Pham avatar
    12 posts
    Member since:
    Jun 2015

    Posted 06 Jun 2015 in reply to Mike Link to this post

    Hello Telerik team, 

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

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

    This is my css

    <style>
        .k-pager-wrap k-grid-pager
        {
             
            align-content:center;
            text-align:right;
            align-items:center;   
        }
     
    </style>

     

    Thank you

  5. Dimo
    Admin
    Dimo avatar
    8457 posts

    Posted 10 Jun 2015 Link to this post

    Hello Pham,

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

    Regards,
    Dimo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. Jacques
    Jacques avatar
    5 posts
    Member since:
    Jun 2015

    Posted 20 Jul 2015 in reply to Dimo Link to this post

    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.
  7. Dimo
    Admin
    Dimo avatar
    8457 posts

    Posted 21 Jul 2015 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  8. Manuel
    Manuel avatar
    11 posts
    Member since:
    Jul 2015

    Posted 02 Sep 2015 in reply to Jacques Link to this post

    So much complaining when you even use the product for free.. :D
  9. Jenny
    Jenny avatar
    3 posts
    Member since:
    Jul 2011

    Posted 18 Jan 2018 Link to this post

    How to remove the button showing with "..." tool tips say "more pages" from the Kendo.UI.Grid pager?  
  10. Jenny
    Jenny avatar
    3 posts
    Member since:
    Jul 2011

    Posted 18 Jan 2018 Link to this post

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

    Posted 19 Jan 2018 Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top