Export and Toolbar button styling

[Reid]

I cannot figure out how to change the buttons on the grids where "Export to Excel" or "Export PDF" is enabled.  What style can I set (override) that will control the .css for the buttons?

[Vessy]

Hi Reid,

Each toolbar button of the Grid has an unique CSS class (k-grid-[toolName]), so you can style the buttons directly through these classes like in the following Dojo: https://dojo.telerik.com/IbUVUKah

Namely:

.k-grid .k-grid-excel{
  color: #fff;
  background-color: #00f;
}
.k-grid .k-grid-pdf{
  color: #fff;
  background-color: #f00;
}

Regards,
Vessy
Progress Telerik

[Reid]

Hi,

I added those styles and set a desired color but it has no effect.

[Vessy]

Hi Reid,

Did you try making the CSS selectors heavier or adding an "!important" statement to the applied styles (note, that the selectors for the Less and Sass themes are different). What is the Theme that you are using? Meanwhile, you can try to style the buttons with the following selectors:

.k-grid .k-button.k-grid-excel {
    color: #fff ;
    background-color: #00f ;
    background-image: none;
}
.k-grid .k-button.k-grid-pdf {
    color: #fff ;
    background-color: #f00 ;
    background-image: none;
}

Regards,
Vessy
Progress Telerik

[Reid]

Thank you for that reply.  That works!

[Vessy]

Hi,

You are welcome, Reid - I am glad my suggestion was helpful for you. Let us know whenever you need further assistance with our widgets.

Regards,
Vessy
Progress Telerik