Width problem of RadAsyncUpload

9 posts, 1 answers
  1. Tejas
    Tejas avatar
    31 posts
    Member since:
    Mar 2011

    Posted 17 Aug 2011 Link to this post

    Hi,
    I have a RadAsyncUpload control on my page in <td> tag of HTML table. Unfortunately, Its width fall outside the HTML table.
    I have other elements in the other <td> tag but those elements can not be click as RadAsyncUpload control overlaps the other elements.
    How can I control the width of RadAsyncUpload control ?
    In the given code demo, If you try clicking Upload button You will still get a file dialogue opened to select file.
    Please also note that, the textbox for the description read only. When I replaced RadAsyncUpload control with RadUpload I can enter text in textbox, means It becomes editable.
    Here is a HTML:
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="TestRadAsyncUpload_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>
        <style type="text/css">
               .ruBrowse
                 {
                    background-position: 0 -46px !important;
                    width: 122px !important;
                 }
      
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        </telerik:RadScriptManager>
        <telerik:RadAjaxPanel ID="ajaxPanel" runat="server" LoadingPanelID="RadAjaxLoadingPanel1">
             <table width="70%" cellpadding="0" cellspacing="0" border="1">
                <tr>
                    <td style="width: 30%">
                        Select Files :
                    </td>
                    <td style="width: 30%; ">
                         <%--<telerik:RadAsyncUpload  ID="uploadRefAndInstrucs" AllowedFileExtensions="doc,docx,xls,xlsx,pdf,zip,rar,tar,gz" runat="server" >
                         </telerik:RadAsyncUpload>--%>
                          
                         At least one file muct be selected<br /> <br />
                        <telerik:RadAsyncUpload  ID="uploadRefAndInstrucs" runat="server" Width="190px" CssClass="ruBrowse" >
                         </telerik:RadAsyncUpload>
                          
                        <%-- <telerik:RadUpload ID="uploadRefAndInstrucs" runat="server" >
                         </telerik:RadUpload>--%>
                          
                    </td>
                    <td style="width: 40%">
                          
                    </td>
                     <td style="width: 30%">
                        Select Files :
                    </td>
                    <td valign="top" style="width: 30%; ">
                         <%--<telerik:RadAsyncUpload  ID="uploadRefAndInstrucs" AllowedFileExtensions="doc,docx,xls,xlsx,pdf,zip,rar,tar,gz" runat="server" >
                         </telerik:RadAsyncUpload>--%>
                          
                        <telerik:RadAsyncUpload  ID="RadAsyncUpload1" runat="server" Width="190px" CssClass="ruBrowse" >
                         </telerik:RadAsyncUpload>
                         <asp:Button ID="btnUpload" runat="server" CausesValidation="false" Text="Upload" OnClick="btnUploadAnotherLanguage_Click" />      
                        <%-- <telerik:RadUpload ID="uploadRefAndInstrucs" runat="server" >
                         </telerik:RadUpload>--%>
                    </td>
                    <td style="width: 40%">
                          
                    </td>
                </tr>
                <tr>
                    <td style="width: 30%">
                        <asp:Label runat="server" ID="lblContentSource" Text="Content Source Language *"
                            Width="100%"></asp:Label>
                    </td>
                    <td style="width: 30%">
                        <asp:DropDownList runat="server" ID="ddlCotentSourceLanguage" Width="100%">
                            <asp:ListItem Text="-- Select Language --" Value="0"></asp:ListItem>
                            <asp:ListItem Text="Canada" Value="1"></asp:ListItem>
                            <asp:ListItem Text="USA" Value="2"></asp:ListItem>
                            <asp:ListItem Text="China" Value="3"></asp:ListItem>
                        </asp:DropDownList>
                    </td>
                    <td style="width: 20%">
                          <asp:RequiredFieldValidator ID="ReqContentSourceLanguage" ValidationGroup="UpdateGroup"
                            ToolTip="Content source language is required." runat="server" ControlToValidate="ddlCotentSourceLanguage"
                            InitialValue="0" Text="*" Display="Dynamic" ErrorMessage="Select content source language."></asp:RequiredFieldValidator>
                    </td>
                    <td colspan="3" style="width: 20%">
                          
                    </td>
                </tr>
                <tr>
                     <td align="right">
                                <asp:Label ID="lblDescription" runat="server" Text="Description*"></asp:Label>
                      </td>
                     <td style="width: 25%">
                            <asp:TextBox ID="txtDescription" runat="server"  TextMode="MultiLine" Width="100%"></asp:TextBox>
                    </td>
                    <td>
                         <asp:RequiredFieldValidator ID="ReqDescription"
                            runat="server" ValidationGroup="UpdateGroup" ControlToValidate="txtDescription"
                            Display="Dynamic" Text="*" ErrorMessage="Enter description."></asp:RequiredFieldValidator>
                    </td>
                     <td colspan="3" style="width: 20%">
                          
                    </td>
                </tr>
                <tr>
                    <td colspan="6">
                         <asp:Button ID="btnUploadAnotherLanguage" runat="server" ValidationGroup="UpdateGroup" Text="Submit" OnClick="btnUploadAnotherLanguage_Click" />      
                    </td>
                </tr>
            </table>
        </telerik:RadAjaxPanel>
        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
        </telerik:RadAjaxLoadingPanel>
        </form>
    </body>
    </html>

    Thanks

    Tejas
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 18 Aug 2011 Link to this post

    Hello Tejas,

    Please try overriding the default CSS like below.
    CSS:
    .RadUpload .ruFileWrap
    {
    white-space:pre-wrap !important;
    }

    Thanks,
    Shinu.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Tejas
    Tejas avatar
    31 posts
    Member since:
    Mar 2011

    Posted 18 Aug 2011 Link to this post

    Hi Shinu,

    Thanks for the reply and I tried your CSS for to RadAsyncUpload control but It does not work.
    I'm trying to control the width of RadAsyncUpload control not the RadUpload control.
    RadUpload already works Okay. But I want to use RadAsyncUpload control.
    You may try the HTML I have provided with RadAsyncUpload control.
    Please also observe Description textbox as It should be editable but its uneditable.
    Any other clue ?
    Thanks

    Tejas
  5. Peter Filipov
    Admin
    Peter Filipov avatar
    1028 posts

    Posted 23 Aug 2011 Link to this post

    Hi Tejas,

    Please clarify which version of our controls and browser you are using. I have tested your code on my side and everything works fine.

    All the best,
    Peter Filipov
    the Telerik team

    Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

  6. Tejas
    Tejas avatar
    31 posts
    Member since:
    Mar 2011

    Posted 23 Aug 2011 Link to this post

    Hi,

    I'm using version 2010.2.713.35 for telerik controls, IE 9 with version 9.0.8112.16421 and Visual Studio 2008 with framework 3.5.

    Thanks

    Tejas
  7. Answer
    Peter Filipov
    Admin
    Peter Filipov avatar
    1028 posts

    Posted 25 Aug 2011 Link to this post

    Hello Tejas,

    I was able to reproduce your CSS issue with the 2010.2.713.35 version. Please add the following CSS to your project:
    span.ruFileWrap
    {
      position: relative !important;
    }

    Kind regards,
    Peter Filipov
    the Telerik team

    Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

  8. Tejas
    Tejas avatar
    31 posts
    Member since:
    Mar 2011

    Posted 25 Aug 2011 Link to this post

    Hi,
    It worked now !!!.

    Thanks

    Tejas
  9. MTC
    MTC avatar
    26 posts
    Member since:
    Jan 2013

    Posted 28 Mar 2013 Link to this post

    Hi,

    I am using tekerik RadAsyncUploade Control . It works fine in my Local server(LAN)  but in Production(WAN).
    In WAN it always goes to OnClientFileUploadFailed event and shows "Http Error Code is :500" as error message..
    Please help me on this..


    Posted 2 days ago (permalink)

    Hi,

    I am using tekerik RadAsyncUploade Control . It works fine in my Local server(LAN)  but in Production(WAN).
    In WAN it always goes to OnClientFileUploadFailed event and shows "Http Error Code is :500" as error message..
    Please help me on this..Hi,

    I am using tekerik RadAsyncUploade Control . It works fine in my Local server(LAN)  but in Production(WAN).
    In WAN it always goes to OnClientFileUploadFailed event and shows "Http Error Code is :500" as error message..
    Please help me on this..
  10. Hristo Valyavicharski
    Admin
    Hristo Valyavicharski avatar
    975 posts

    Posted 28 Mar 2013 Link to this post

    Hi,

    I noticed that this forum post is duplicated to http://www.telerik.com/community/forums/aspnet-ajax/async-upload/radasyncupload-issue.aspx. Please submit only one forum post per issue.

    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