I just updated to the latest telerik ajax controls (2011.2 915) and now the RadUpload control looks very strange in IE 8. No matter what skin I put on it, it just looks like a gray box with a top and right border and no browse button.
In Firefox it looks correct.
Any ideas?
46 Answers, 1 is accepted
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm2.aspx.vb" Inherits="WebForm2" %>
<!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>
</head>
<body>
<form id="form1" runat="server">
<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
<Scripts>
<asp:ScriptReference Assembly="Telerik.Web.UI"
Name="Telerik.Web.UI.Common.Core.js">
</asp:ScriptReference>
<asp:ScriptReference Assembly="Telerik.Web.UI"
Name="Telerik.Web.UI.Common.jQuery.js">
</asp:ScriptReference>
<asp:ScriptReference Assembly="Telerik.Web.UI"
Name="Telerik.Web.UI.Common.jQueryInclude.js">
</asp:ScriptReference>
</Scripts>
</telerik:RadScriptManager>
<telerik:RadUpload ID="RadUpload1" Runat="server" InputSize="50"
ControlObjectsVisibility="None" MaxFileInputsCount="1" OverwriteExistingFiles="True"
ReadOnlyFileInputs="True" Skin="Web20">
</telerik:RadUpload>
<telerik:RadAjaxManager runat="server">
</telerik:RadAjaxManager>
</form>
</body>
</html>
I've made a sample page with the RadUpload situated in a table trying to reproduce the issue, but to no avail.
Please open a support ticket and provide a runnable sample page with the issue being reproduced so we could examine it locally.
All the best,
Dimitar Terziev
the Telerik team
Please try to provide a screenshot showing the problem and the implementation that you are using so I could test it locally.
All the best,
Dimitar Terziev
the Telerik team
Here is the page: Notice I added BackColor="gray" and that color shows up where I would expect the browse button to be. It still works as long as I click on the text box input and that brings up the file selection dialog.
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm4.aspx.vb" Inherits="Temp.WebForm4" %>
<!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>
</head>
<body>
<form id="form1" runat="server">
<telerik:RadScriptManager ID="RadSM1" runat="server">
</telerik:RadScriptManager>
<telerik:RadUpload ID="RadUpload1" runat="server" InputSize="50" ControlObjectsVisibility="None" MaxFileInputsCount="1" OverwriteExistingFiles="True" ReadOnlyFileInputs="True" BackColor="gray" TargetFolder="~/Images/">
</telerik:RadUpload>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" EnableAJAX="true" EnableViewState="False"></telerik:RadAjaxManager>
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" Runat="server" Skin="Default" Transparency="0" EnableViewState="False">
</telerik:RadAjaxLoadingPanel>
</form>
</body>
</html>
I've tested the sample mark-up provided with the latest official version of the controls and the upload is shown properly in IE8.
Since you have mentioned that this only happens on your machine, please check whether you have some specific add-on on the browser which might be causing this strange behavior or some custom settings.
All the best,
Dimitar Terziev
the Telerik team
I don't have any toolbars installed in IE 8.
Can you think of any settings I should be looking at in IE?
We are still unable to reproduce the problem, on our side the upload looks pretty fine. Could you please make sure that your IE is configured to display JavaScript errors:
1) Go to Tools
2) Internet Options
3) Advanced
4) Make sure that there is no thick on "Disable JavaScript debugging"
If there are no JavaScript errors, however, the upload still renders the same way please install Internet Explorer developer toolbar and check in what mode is your IE running. I am attaching a screenshot showing where you should look.
All the best,
Genady Sergeev
the Telerik team
Please try removing the InputSize setting from your upload declaration. Does the problem persist? We believe that changing the input size triggers such issue in some environments (always with IE8).
All the best,
Genady Sergeev
the Telerik team
I will dig a little bit in the problem next monday. If you find something let me know, I will follow this thread and keep you informed of what I found.
I'm starting to running out of time right now and I need to deliver something....
Ok, so I got rid of the InputSize and, yes, the browse button is now there. However, my form looks funny if that input is not sized properly. Is there a work around for this? Or is this something that will be addressed in a future release?
I have no javascript errors (my "Disable JavaScript debugging" setting is unticked)
And after downloading the IE developer toolbar, it says my Browser Mode is IE8 and my Document Mode is IE8 Standards.
Anything else you want me to check to help solve this issue?
BTW, Genady, you attached the wrong screen shot.
[...]
Definitly, I can't find a workable solution. I reduced de InputSize from 55 to 20 to temporarily fix the problem. The control with is wide enough but the the input size is too small. I hope that this problem will be fixed in the next release.
<
telerik:RadStyleSheetManager
id
=
"RadStyleSheetManager1"
runat
=
"server"
CdnSettings-TelerikCdn
=
"Disabled"
/>
<
telerik:RadScriptManager
ID
=
"RadScriptManager1"
runat
=
"server"
EnableCdn
=
"false"
CdnSettings-TelerikCdn
=
"Disabled"
>
<
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
>
<
telerik:RadAjaxManager
ID
=
"RadAjaxManager1"
runat
=
"server"
>
</
telerik:RadAjaxManager
>
<
telerik:RadUpload
ID
=
"RadUpload1"
runat
=
"server"
InputSize
=
"20"
InitialFileInputsCount
=
"1"
Width
=
"450px"
Skin
=
"Web20"
OnValidatingFile
=
"RadUpload1_ValidatingFile"
ControlObjectsVisibility
=
"RemoveButtons, AddButton"
>
<
Localization
Select="<%$ Resources:RadUpload, Select %>"
Remove="<%$ Resources:RadUpload, Remove %>"
Add="<%$ Resources:RadUpload, Add %>"
Clear="<%$ Resources:RadUpload, Clear %>"
Delete="<%$ Resources:RadUpload, Delete %>" />
</
telerik:RadUpload
>
You might be able to adjust it using CSS. You can override the Telerik CSS classes, make sure you use !important if you want to make sure your style gets applied.
I tried it out in other browsers on my machine. Firefox seems ok, not sure why I thought that wasn't working before. Strange that Opera resizes differently to the others. See my image attached.
I believe we are facing a weird filter bug in IE8. The Upload uses an opacity filter to overlay the default file input's Select button. This filter is implemented as an ActiveX control in IE versions 8 and below. As such, it is subject to security settings and can be accidentally disabled. Apart from this, it seems that the filter is failing in if there is Zoom applied to a page. Do you guys use pages that have zoom?
I've that following suggestion, could you try using this CSS on pages with RadUpload:
<
style
type
=
"text/css"
>
.ruFileInput
{
zoom: 1.03 !important;
}
</
style
>
Does this change anything?
All the best,
Genady Sergeev
the Telerik team
I try your suggestion and now I can see the Browse button in IE 8. However, the button is not clickable, the opacity filter for the browse (select) button still overlap the the RadInput field as you can see below.
With firefox, that works correctly. With IE, the page zoom option seems to change nothing. I let it to 100%.
Is that help? Do you have another suggestion?
Thanks
Alain
Same thing here. Clicking on the Browse button does nothing. I have to click on the smaller top-most grey input for the file dialog to come up.
I don't do anything with zoom on my page.
I would like to try the mentioned css fixes but the problem is the upload control which shows the problem for me is the one used by the radeditor. it is shown in a radWindow dialog which uses an iframe, thus it does not see the css fix.
How can I apply these fixes for controls which are not directly controlled by me and loaded in a radwindow?
Before trying the CSS classes first try this:
Set the following option to "Enable" in Internet Explorer: "Internet Options -> Security -> Internet (or Local intranet) -> Custom Level -> Binary and script behaviors"
Does the issue persist?
As for the css classes, simply place
<style type=
"text/css"
>
.ruFileInput
{
zoom: 1.03 !important;
}
</style>
On the page that is opened inside the RadWindow or, in the case with Editor, on the page that contains the editor.
Greetings,
Genady Sergeev
the Telerik team
In my case the "Binary and script behaviors" option was and it is still enable for the two levels : Internet and Local Intranet.
The control is working but the Input size is limited to 20 characters. The width of 450px is wide enough and when I try to increase the Input Size, the Browse (select) button disappear and a kind of filter overlap the Input area. The control is still working but the text in the Input area is hidden by this kind of filter. The CSS trick partially fixed the problem by displaying the Browse button but the filter stay there and the button is still not clickable.
This control was working fine in the previous release and my QA is not happy with this small RadInput. Is it possible to just restore the previous RadUpload control?
Alain
Have you tried applying zoom:1 to the .ruFileInput css class?
The reason it was working in the previous version and is not working now, is that we have changed the way the invisible input is positioned under the fake input in order to solve annoying bug in IE6/7/8 where the select button was not clickable. However, as it seems, we have introduced another bug, again in IE/6/7/8, where the opacity filter is not applied to the real input in some (yet unknown) cases.
We have did some changes to the positioning styling for the Q3 beta release. Have any of you guys tried out the beta yet?
Regards,
Genady Sergeev
the Telerik team
I played a little bit with the zoom factor to the .ruFileInput css class.
With Zoom factor < 1.02 => No Browse Button available.
With Zoom factor >= 1.03 => The browse button appears but is not clickable / The filter over the input area start stretching.
With Zoom factor = 1.05 => The filter almost disappears and the input area became an standard input text / The browse button is still not clickable ( see picture).
With Zoom factor > 1.06 => The filter totally disappear and the input area is like a standard input text / The browse button is still not clickable / The selection is impossible.
Then, I installed the the Q3 release, I modified my application because only the default skins seems available, and I have the same problem.
What can I do?
Alain
We did slight changes to the RadUpload css for the upcoming Q3 release. More specific, it is now possible to fine tune the file input size. We discovered that decreasing the hidden input size fixes the opacity filter bug. Before the Q3 release, the following style was set to the hidden file input:
.RadUpload input.ruFileInput
{
font: 200px monospace !important;
}
As you can see, it is set with !important, so that it is not possible to override it. Now we have removed the important declaration and it is possible to decrease the size and override the default style. Here is how:
div.RadUpload input.ruFileInput
{
font
:
50px
monospace
}
I hope that this helps.
Kind regards,
Genady Sergeev
the Telerik team
We have developed a test whether IE refuses to make file input elements transparent. You can find it here:
http://jsfiddle.net/VwP5f/
All the best,
Genady Sergeev
the Telerik team
How many time left before the Q3 release? I guess this is for the end of November.
In mid time, can we do something or we just have to be patient?
Thanks
Alain
No, it seems that your IE fails to filter the hidden input. Could you please try decreasing the font: 500px monospace. You can try doing with a step of 100px until your reach 100px and then with a step of 20px. Does at some point the problem vanish? Thank you for your cooperation!
Alain, the Q3 release is due to few days, it should be released by the end of this week. Until it is released, you can try setting the EnableFileInputSkinning property to false.
All the best,
Genady Sergeev
the Telerik team
<
telerik:RadUpload ID="RadUpload1" runat="server" ControlObjectsVisibility="None" Skin="Default" MaxFileInputsCount="1" TabIndex="8">
<Localization Select="Browse" />
</telerik:RadUpload>
Thank you very much.
<
telerik:RadUpload
ID
=
"RadUpload1"
runat
=
"server"
Width
=
"450px"
InputSize
=
"55"
InitialFileInputsCount
=
"1"
OnValidatingFile
=
"RadUpload1_ValidatingFile"
ControlObjectsVisibility
=
"RemoveButtons, AddButton"
>
<
Localization
Select="<%$ Resources:RadUpload, Select %>"
Remove="<%$ Resources:RadUpload, Remove %>"
Add="<%$ Resources:RadUpload, Add %>"
Clear="<%$ Resources:RadUpload, Clear %>"
Delete="<%$ Resources:RadUpload, Delete %>" />
</
telerik:RadUpload
>
However, I don't understand why its not working for Slava. I've removed the 'Width' and 'InputSize' and I also set the 'ControlObjectsVisibility' to None and everything work as expected.
Slava, try to set the InitialFileInputsCount="1". This is the only thing I can see. I'm also not using the Skin parameter because it is set in the Web.Config in my application.
Alain
It seems that there is something specific regarding your environment that we are not aware of. I have the following suggestion, could you please place this style on the page and let us know how it is going. Is the problem resolved?
.ruFileInput
{
font
:
11px
/
10px
"Segoe UI"
,
Arial
,
sans-serif
!important
;
}
Greetings,
Genady Sergeev
the Telerik team
You can also try downgrading to 2011.1.621.40 .. we're seeing some strange control hovering, but atleast the select button is there :)
Latest versions are broken! Telerik demos will verify that!
See attached image..
Have you tried the suggestion from my previous replay?
Kind regards,
Genady Sergeev
the Telerik team
<%@ 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"
/>
</
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:RadUpload
ID
=
"RadUpload1"
Runat
=
"server"
InputSize
=
"57"
>
</
telerik:RadUpload
>
<
telerik:RadUpload
ID
=
"RadUpload2"
Runat
=
"server"
InputSize
=
"58"
>
</
telerik:RadUpload
>
</
div
>
</
form
>
</
body
>
</
html
>
Thanks for pointing this to us. I've forwarded to our QA, however, at least on my machine I was not able to reproduce it. It seems that there it is a combination of IE security settings and configuration of RadUpload that is triggering the problem.
All the best,
Genady Sergeev
the Telerik team
I've a similar problem here with running IE in compatibility mode set in web.config:
<
httpProtocol
>
<
customHeaders
>
<
add
name
=
"X-UA-Compatible"
value
=
"IE=EmulateIE7"
/>
</
customHeaders
>
</
httpProtocol
>
The markup looks like this:
<
div
>
<
telerik:RadUpload
ID
=
"upload"
runat
=
"server"
Skin
=
"Default"
MaxFileInputsCount
=
"1"
ControlObjectsVisibility
=
"None"
EnableFileInputSkinning
=
"false"
OnClientFileSelected
=
"ClientFileSelected"
ReadOnlyFileInputs
=
"true"
/>
<
telerik:RadUpload
ID
=
"RadUpload1"
runat
=
"server"
InputSize
=
"57"
>
</
telerik:RadUpload
>
<
telerik:RadUpload
ID
=
"RadUpload2"
runat
=
"server"
InputSize
=
"58"
>
</
telerik:RadUpload
>
</
div
>
See the attached file for how the output looks! The 'browse'-button is missing. The second and third RadUpload control are copied from Greg's post above and look ok, but the one I need doesn't look ok. Version of the telerik controls I'm using: 2011.3.1305.40
Update:
Found the culpit! Removing EnableFileInputSkinning="false" shows the 'browse'-button again!
Regards,
Tonino.
We are aware of that problem and have already resolved it. The fix will be available with the next service pack.
Regards,
Genady Sergeev
the Telerik team
I have the same issue.
Thanks
The service pack is scheduled for the mid of April. Is this an urgent problem for you? If so, you can utilize the latest internal build, which contains the fix as well. You can find more information regarding the latest internal build here.
Kind regards,
Genady Sergeev
the Telerik team
{visibility: visible;}
.hideme
{visibility: hidden;}
<
telerik:RadAsyncUpload runat="server" ID="anex5" AllowedFileExtensions="jpg,jpeg,png,gif,doc,docx,xls,xlsx,zip"
MaxFileSize="5242880" InputSize="2" Width="220" InitialFileInputsCount="1" Skin="Metro"
OverwriteExistingFiles="false" TargetFolder="~/Source/Doc/" TargetPhysicalFolder="~/Source/Doc/"
AutoAddFileInputs="false" OnFileUploaded="anex5Edit_FileUploaded" OnClientFileUploading="anex5_OnClientFileUploading"
OnClientFileUploaded="anex5_OnClientFileUploaded" OnClientValidationFailed="anex5_validationFailed"
OnClientFileSelected="anex5_OnClientFileSelected" OnClientFileUploadRemoving="anex5_OnClientFileUploadRemoving"
OnClienFileUploadRemoved="anex5_OnClienFileUploadRemoved" ClientIDMode="Static"
CssClass="hideme" >
</telerik:RadAsyncUpload>
function test5() {
//$telerik.$(".anex5").css("showme");
document.getElementById('anex5').className = "showme";
return false;
}
After Click on image button , I just set the class from javascript. In IE9 strange behaviour. both files are attached.it is very urgent please help me in this regards.
You can use the client object of RadAsyncUplaod instead of using this css styles as in the code below:
var asyncUpload = $find("<%= anex5.ClientID %>");
asyncUpload.set_visible(false);
// asyncUpload.set_visible(true);
Hope this will be helpful.
Kind regards,
Plamen
the Telerik team
Hi Plamen ,
First of all thanks for your reply , its working fine , but when I am trying to using it in NestedViewTemplate Of Rad Grid view , so I am unable to find this object.when I try to find this object , so I msg raised unable to find object.Below is my markup where I am again facing same issue again :(
<
telerik:RadGrid ID="grvProjectTelerik" runat="server" AllowPaging="True" Style="font-family: serif"
Skin="Windows7" OnItemCommand="grvProjectTelerik_ItemCommand" PageSize="30" OnItemCreated="grvProjectTelerik_ItemCreated">
<MasterTableView AutoGenerateColumns="False" HierarchyLoadMode="ServerOnDemand" DataKeyNames="project_id,project_description,title,statusId,anx1">
<Columns>
<telerik:GridBoundColumn DataField="title" HeaderText="Capex Title" UniqueName="ProjectTitle"
FilterControlAltText="Filter 1 column" ItemStyle-HorizontalAlign="Left" DataType="System.String">
</telerik:GridBoundColumn>
</Columns>
<NestedViewSettings DataSourceID="SqlDataSource2">
<ParentTableRelation>
<telerik:GridRelationFields DetailKeyField="project_id" MasterKeyField="project_id" />
</ParentTableRelation>
</NestedViewSettings>
<NestedViewTemplate>
<asp:Panel ID="NestedViewPanel" runat="server" CssClass="viewWrap" ScrollBars="Auto">
<div class="contactWrap">
<telerik:RadAsyncUpload runat="server" ID="anex1Edit" AllowedFileExtensions="jpg,jpeg,png,gif,doc,docx,xls,xlsx,zip,bmp"
MaxFileSize="5242880" InputSize="2" Width="220" InitialFileInputsCount="1" Skin="Metro"
OverwriteExistingFiles="false" TargetFolder="~/Source/Doc/" TargetPhysicalFolder="~/Source/Doc/"
AutoAddFileInputs="false" OnFileUploaded="anex1Edit_FileUploaded" OnClientFileUploading="anex1Edit_OnClientFileUploading"
OnClientFileUploaded="anex1Edit_OnClientFileUploaded" OnClientValidationFailed="anex1Edit_validationFailed"
OnClientFileSelected="anex1Edit_OnClientFileSelected" OnClientFileUploadRemoving="anex1Edit_OnClientFileUploadRemoving"
OnClienFileUploadRemoved="anex1Edit_OnClienFileUploadRemoved" ClientIDMode="Static">
</telerik:RadAsyncUpload>
</div>
</asp:Panel>
</NestedViewTemplate>
<EditFormSettings>
<EditColumn FilterControlAltText="Filter EditCommandColumn column">
</EditColumn>
</EditFormSettings>
</MasterTableView>
<ItemStyle HorizontalAlign="Left" />
<PagerStyle HorizontalAlign="Left"></PagerStyle>
<ExportSettings FileName="Shoaib">
<Pdf Author="Shoaib" Creator="Shoaib" PageTitle="Shoaib's RadGrid" Subject="Shoaib"
Title="Shoaib" />
</ExportSettings>
<ClientSettings>
<Selecting CellSelectionMode="None"></Selecting>
</ClientSettings>
<PagerStyle Mode="NumericPages"></PagerStyle>
</telerik:RadGrid>
<asp:SqlDataSource ID="SqlDataSource2" ConnectionString="<%$ ConnectionStrings:dbCon %>"
SelectCommand="Select * from testing where ttpid =@project_Id" runat="server">
<SelectParameters>
<asp:Parameter Name="project_id" />
</SelectParameters>
</asp:SqlDataSource>
you can use jQuery to select RadAsyncUpload by class name:
var
asyncUploadId = $(
'.RadAsyncUpload.RadUpload.RadUpload_Windows7'
).attr(
'id'
);
var
asyncUpload = $find(asyncUploadId);
asyncUpload.set_visible(
false
);
// asyncUpload.set_visible(true);
All the best,
Hristo Valyavicharski
the Telerik team
var
asyncUploadId = $(
'.RadAsyncUpload.RadUpload.anex1Edit'
).attr(
'id'
);
var
asyncUpload = $find(asyncUploadId); // null returns here :/
//asyncUpload.set_visible(
false
);
Regards.
Probably you have multiple RadAsyncUploads in the RadGrid. Use Firebug or Chrome Developer tools to see what is the class name that RadAsyncUpload has. Note that it will be the same for all RadAsyncUploads.
As far as from your code snippet you are using Windows7 skin for the Grid and Metro skin for RadAsyncUpload. Then upload control should have this class name:
class="RadAsyncUpload RadUpload RadUpload_Metro" similar to this screenshot.
Use jQuery to get collection with all uploads in the grid and finally get id of the desired control:
//get collection with all RadAsyncUpload controls that has Metro skin
var
uploads = $(
'.RadAsyncUpload.RadUpload.RadUpload_Metro'
);
//Get id if you have only one RadAsyncUpload in the grid
var
asyncUpload =$(
'.RadAsyncUpload.RadUpload.RadUpload_Metro'
).attr(
'id'
);
//Get id if you have multiple RadAsyncUpload controls in the grid
var
asyncUpload1 = uploads[0].id;
var
asyncUpload2 = uploads[1].id;
Kind regards,
Hristo Valyavicharski
the Telerik team