colour change Radgrid pagination button

2 posts, 0 answers
  1. Ramesh
    Ramesh avatar
    18 posts
    Member since:
    Apr 2015

    Posted 07 Mar 2019 Link to this post

    Hi Team,

    Can we able to change the colour of pagination button (next, prev next , prev etc..) ?




  2. Vessy
    Vessy avatar
    2189 posts

    Posted 11 Mar 2019 Link to this post

    Hi Ramesh,

    From the attached image I can see that you are using the Grid in Classic rendering. The pagination buttons in this mode are rendered via icons(background images), so you will need to create and set a custom icon for each button in order to change its color. For example, the first page button's icon can be changed with the following style:
    .RadGrid input.rgPageFirst {
        background-image: url(customIcon.png);
        background-position: 0;

    If you decide to switch to Lightweight rendering, where the buttons are rendered via font icons, you can change only the background color of the buttons keeping the icons like follows:
    div.RadGrid .rgPagerCell .rgPagerButton,
    div.RadGrid .rgPagerCell .rgActionButton {
        border-width: 1px;
        border-style: solid;
        border-radius: 2px;
        border-color: #687dc1;
        color: #fff;
        background-color: #ff0000;
        background-image: none;/*linear-gradient(#8d9dd2,#5762a3 50%,#3c4d8f 50%,#687dc1);*/

    For further customization, you can follow the suggestions in the first two points of the Improve Your Debugging Skills with Chrome DevTools blog post. 

    Once you know the styles you need to override, you can use the same style selector and add "html body " in front of it to make it more specific, "stronger". More on CSS specificity you can find here: 

    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top