Why Does Custom Button Inherit Refresh Image?

4 posts, 0 answers
  1. BRIAN
    BRIAN avatar
    12 posts
    Member since:
    Aug 2011

    Posted 28 Mar 2013 Link to this post

    Suppressing my frustrations with Mr. Telerik, I am going to re-post this issue again, under a new thread.

    I have an ASP.NET page in Visual Studio 2010 that contains a FileExplorer control [Telerik.Web.UI, v.2011.3.1305.40 (Dev)]. In the Page_Load event, I add a custom button to the FileExplorer toolbar.

    At run-time, the custom button appears on the toolbar with a default image that matches the Refresh image. I am not specifying this image programmatically; it just appears on its own. Why?

    I have <style type="text/css"> in the <head runat="server"> of my page and the CSS class is assigned to the custom button during the Page_Load event. With background-image:none; within the CSS, the Refresh image still appears on my custom button.

    If I set background-image:url(Images/MyImage.png) !important; within the CSS, the custom button now appears with 2 images; my own image, plus the Refresh image.

    How do I get my image to replace the Refresh image? How do I get the Refresh image to no longer appear on my custom toolbar button?

    In my prior thread, you asked for a sample project, but how do I get the sample to you? I placed my sample project into a zipped file, but when I click Attach Your Files to this thread, it tells me it will only Allowed extensions .gif, .jpg, .jpeg, .png. These are all image types, so how do I send you my sample project or zipped file?


  2. BRIAN
    BRIAN avatar
    12 posts
    Member since:
    Aug 2011

    Posted 28 Mar 2013 Link to this post

    Since I am unable to upload my sample project, I am providing the steps to repro my problem here. The steps are simple:


    1. Launch Visual Studio and create a new Telerik Web project.
    2. When creating the new project, use the template C# RadControls Web Application.
    3. Create the new project with the default name of RadControlsWebApp1.
    4. After the project is created, go to Solution Explorer, right-click on RadControlsWebApp1, point at Add, and click on New Folder.
    5. Create a new folder named Images.
    6. Take the image that was attached to this thread and save it to the new Images folder.
    7. Go back to Solution Explorer, right-click on Default.aspx, and click Open.
    8. Modify the page as follows:


    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Default" %>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head runat="server">


           <telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" />

            <style type="text/css">



                    background-image:none !important;

                    background-image:url(Images/MyImage.png) !important;






        <form id="form1" runat="server">

           <telerik:RadScriptManager ID="RadScriptManager1" runat="server">


                        <%--Needed for JavaScript IntelliSense in VS2010--%>

                        <%--For VS2008 replace RadScriptManager with ScriptManager--%>

                        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />

                        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />

                        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />



           <script type="text/javascript">

                 //Put your JavaScript code here.


           <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"></telerik:RadAjaxManager>


            <telerik:RadFileExplorer ID="radFileExplorer" runat="server"></telerik:RadFileExplorer>






    1. In Solution Explorer, right-click on Default.aspx, and click View Code.
    2. Modify the code as follows:


    using System;

    using System.Web;

    using System.Web.UI;

    using System.Web.UI.WebControls;

    using System.Data;

    using System.Configuration;

    using System.Web.Security;

    using System.Web.UI.WebControls.WebParts;

    using System.Web.UI.HtmlControls;

    using Telerik.Web.UI;

    public partial class Default : System.Web.UI.Page


        protected void Page_Load(object sender, EventArgs e)


            if (!IsPostBack)


                RadToolBarButton btn = new RadToolBarButton("Test");

                btn.CssClass = "TestStyle";

                //btn.ImageUrl = "Images/MyImage.png";






    1. Within Visual Studio, click on the Build menu, and click on Build RadControlsWebApp1.
    2. After a successful compile, click on the Debug menu, and click on Start Debugging.


    After a web browser loads, the custom button Test appears on the toolbar of FileExplorer. There are 2 images displayed with the custom button; the Refresh image and the custom image.


    What am I missing here? How do I prevent the Refresh image from being displayed with the custom button?


    Thank you

  3. Dobromir
    Dobromir avatar
    1633 posts

    Posted 29 Mar 2013 Link to this post

    Hi Brian,

    The correct CSS selector that have to be used to set an icon to a custom button is as follows:
    .TestStyle .rtbText
        background-image: none !important;
        background-image: url(MyImage.png) !important;
        background-repeat: no-repeat;

    In addition, ZIP files upto 20MB are allowed as an attachment to the support tickets. This limitation to the attachments in the forum threads is to prevent attaching commercial software to a post available to the public audience.

    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.
  4. BRIAN
    BRIAN avatar
    12 posts
    Member since:
    Aug 2011

    Posted 01 Apr 2013 Link to this post

    Hello Dobromir,

    Thank you for your reply. I was able to accomplish my objective by simply adding .rtbText to my CSS as you indicated. Thank you for pointing that out. My "issue" is now resolved. Thank you.
Back to Top