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

colour change Radgrid pagination button

1 Answer 71 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Ramesh
Top achievements
Rank 1
Ramesh asked on 07 Mar 2019, 08:54 AM

Hi Team,

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

Regards,

Ramesh.

 

1 Answer, 1 is accepted

Sort by
0
Vessy
Telerik team
answered on 11 Mar 2019, 09:26 AM
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: 


Regards,
Vessy
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.
Tags
Grid
Asked by
Ramesh
Top achievements
Rank 1
Answers by
Vessy
Telerik team
Share this question
or