RadUpload looks strange in IE 8

Thread is closed for posting
47 posts, 0 answers
  1. Alain
    Alain avatar
    7 posts
    Member since:
    Aug 2011

    Posted 21 Nov 2011 Link to this post

    Last Thursday, I upgraded the AJAX components and added the new theme style in reference and everything work fine with IE8, IE9 and Firefox.

    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
  2. Slava
    Slava avatar
    9 posts
    Member since:
    Jan 2011

    Posted 21 Nov 2011 Link to this post

    Adding InitialFileInputsCount="1" didn't help. I've had that exact code before we've upgraded to the next telerik's version, and everything worked fine, even with "InputSize", so I don't think the Skin setting would be a problem but I've removed it, just in case, and it still not showing the "Select" button.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Genady Sergeev
    Admin
    Genady Sergeev avatar
    1596 posts

    Posted 25 Nov 2011 Link to this post

    Hi Slava,

    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
    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. Kræn Munck
    Kræn Munck avatar
    15 posts
    Member since:
    Jun 2008

    Posted 19 Dec 2011 Link to this post

    Hi,

    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..
  6. Genady Sergeev
    Admin
    Genady Sergeev avatar
    1596 posts

    Posted 21 Dec 2011 Link to this post

    Hello Kræn Munck,

    Have you tried the suggestion from my previous replay?

    Kind regards,
    Genady Sergeev
    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. Greg
    Greg avatar
    12 posts
    Member since:
    May 2009

    Posted 18 Jan 2012 Link to this post

    I ran into this same problem and I have the solution!!! The problem is in the RadUpload InputSize property. If InputSize is <= 57 it works correctly. If InputSize is >= 58 it does not render properly. Note that I'm using the Office2007 skin. Here is my test page...

    <%@ 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">
      
    <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>
  8. Genady Sergeev
    Admin
    Genady Sergeev avatar
    1596 posts

    Posted 25 Jan 2012 Link to this post

    Hello Kevin,

    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
    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
  9. Tonino
    Tonino avatar
    107 posts
    Member since:
    Nov 2007

    Posted 24 Feb 2012 Link to this post

    Hello!

    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.
  10. Genady Sergeev
    Admin
    Genady Sergeev avatar
    1596 posts

    Posted 29 Feb 2012 Link to this post

    Hello 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
    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.
  11. Nuno
    Nuno avatar
    1 posts
    Member since:
    Mar 2012

    Posted 09 Mar 2012 Link to this post

    Genady, when the fix will be available ? Have any date ?

    I have the same issue.

    Thanks
  12. Genady Sergeev
    Admin
    Genady Sergeev avatar
    1596 posts

    Posted 14 Mar 2012 Link to this post

    Hello Nuno,

    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
    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.
  13. Shoaib
    Shoaib avatar
    9 posts
    Member since:
    Jul 2010

    Posted 04 Mar 2013 Link to this post

    .showme

     {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.

  14. Plamen
    Admin
    Plamen avatar
    2729 posts

    Posted 08 Mar 2013 Link to this post

    Hello,

     
    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
    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.
  15. Shoaib
    Shoaib avatar
    9 posts
    Member since:
    Jul 2010

    Posted 11 Mar 2013 Link to this post

    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>



     

  16. Hristo Valyavicharski
    Admin
    Hristo Valyavicharski avatar
    975 posts

    Posted 14 Mar 2013 Link to this post

    Hi Shoaib,

    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
    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.
  17. Shoaib
    Shoaib avatar
    9 posts
    Member since:
    Jul 2010

    Posted 15 Mar 2013 Link to this post

    Still null return ?????????? , Waiting for your positive response. I have radgrid inside rad grid I have a NestedViewTemplated, In a nestedviewTemplate I have a  panel  RadAsyncUpload.

    var asyncUploadId = $('.RadAsyncUpload.RadUpload.anex1Edit').attr('id');
    var asyncUpload = $find(asyncUploadId); // null returns here :/
    //asyncUpload.set_visible(false);




    Regards.
  18. Hristo Valyavicharski
    Admin
    Hristo Valyavicharski avatar
    975 posts

    Posted 20 Mar 2013 Link to this post

    Hi Shoaib,

    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
    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017