ToolBarButton - How to remov the default image?

7 posts, 2 answers
  1. Kien
    Kien avatar
    3 posts
    Member since:
    Mar 2012

    Posted 03 Apr 2012 Link to this post

    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);
  2. Answer
    Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 04 Apr 2012 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Answer
    Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 04 Apr 2012 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  5. Kien
    Kien avatar
    3 posts
    Member since:
    Mar 2012

    Posted 04 Apr 2012 Link to this post

    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
  6. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 04 Apr 2012 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  7. Cavit
    Cavit avatar
    16 posts
    Member since:
    Apr 2015

    Posted 15 Jun 2015 in reply to Dobromir Link to this post

    Hi,

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

    Regards

  8. Vessy
    Admin
    Vessy avatar
    1388 posts

    Posted 17 Jun 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017