Hello,
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?
Thanks
3 Answers, 1 is accepted
Rank 1
Since I am unable to upload my sample project, I am providing the steps to repro my problem here. The steps are simple:
- Launch Visual Studio and create a new Telerik Web project.
- When creating the new project, use the template C# RadControls Web Application.
- Create the new project with the default name of RadControlsWebApp1.
- After the project is created, go to Solution Explorer, right-click on RadControlsWebApp1, point at Add, and click on New Folder.
- Create a new folder named Images.
- Take the image that was attached to this thread and save it to the new Images folder.
- Go back to Solution Explorer, right-click on Default.aspx, and click Open.
- 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">
<title></title>
<telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" />
<style type="text/css">
.TestStyle
{
background-image:none !important;
background-image:url(Images/MyImage.png) !important;
background-repeat:no-repeat;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
<Scripts>
<%--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" />
</Scripts>
</telerik:RadScriptManager>
<script type="text/javascript">
//Put your JavaScript code here.
</script>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"></telerik:RadAjaxManager>
<div>
<telerik:RadFileExplorer ID="radFileExplorer" runat="server"></telerik:RadFileExplorer>
</div>
</form>
</body>
</html>
- In Solution Explorer, right-click on Default.aspx, and click View Code.
- 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";
radFileExplorer.ToolBar.Items.Add(btn);
}
}
}
- Within Visual Studio, click on the Build menu, and click on Build RadControlsWebApp1.
- 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
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.
Regards,
Dobromir
the Telerik team
Rank 1
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.