ToolBarButton - How to remov the default image?

[Kien]

Hi,

I created an RabToolBarButton and didn't assign it an icon but it comes by default with the "Refresh" icon when I add it to a RadFileExplorer's ToolBar.

What I need to do to remove the refresh icon?
I tried setting the icon to another image file but it just adds it on top of the refresh icon...

Here's an image of what it looks like

Here's the code :

RadToolBarButton toolbarBtnAlertMe = new RadToolBarButton("Alert Me");
toolbarBtnAlertMe.NavigateUrl = "http://someurl.com";
fileExplorer.ToolBar.Items.Add(toolbarBtnAlertMe);

[Shinu]

Hello Kien,

You can add a custom CSS class to hide the image. Here is the sample code.
C#:

RadToolBarButton toolbarBtnAlertMe = new RadToolBarButton();
 toolbarBtnAlertMe.Text = "gggh";
toolbarBtnAlertMe.CssClass = "BtnStyleClass";
toolbarBtnAlertMe.NavigateUrl = "http://someurl.com";
file.ToolBar.Items.Add(toolbarBtnAlertMe);

CSS:

<style type="text/css">
a.BtnStyleClass.rtbWrap .rtbText
{
   background-image: none !important;
}
</style>

Thanks,
Shinu.

[Dobromir]

Hi Kien,

I have already answered your support ticket on the subject. For convenience I will paste my answer here as well.

You can remove the icon for the custom button added to the toolbar of RadFileExplorer using the following CSS where customButton is CssClass applied to the custom button:

.RadFileExplorer .RadToolBar .customButton .rtbText
{
    background-image: none;
    padding: 0 2px;
}

In addition, while in the solution provided by Shinu the CSS selector is slightly different, it is still valid one, however, it will not remove the extra space reserved for the image.

Greetings,
Dobromir
the Telerik team

[Kien]

Thank you both for the answers. It is somewhat strange that the RadToolBarButton comes by default with the refresh icon and we have to do some custom CSS styling to workaround it...

It sort of defeated the purpose of having the ImageUrl property since it doesn't even replace the default "refresh" icon when set.

Regards,
Kien

[Dobromir]

Hi Kien,

As I explained in the support ticket, RadFileExplorer does not expose full functionality of the nested RadToolBar and also customize its default appearance. That is why the ImageUrl of the custom button does not work the same way as for stand-alone RadToolBar control.

Kind regards,
Dobromir
the Telerik team

[Cavit]

Hi,

Is there  a way we can add a different icon after removing the default refresh icon ?

Regards

[Vessy]

Hi Cavit,

You can add different icon for a custom Toolbar button in the same way as removing the default one. The only thing you have to change is to pass the desired icon URL to the background-image style, instead of setting "none" value and define the needed for the custom icon padding.

For example:

.RadFileExplorer .RadToolBar .customButton .rtbText
{
    background-image: url("/images/customIcon_16x16.png");
    padding: 0 18px;
}

Hope this helps.

Regards,
Vessy
Telerik