RadUpload and JQuery dialogs

Thread is closed for posting
10 posts, 0 answers
  1. Andy
    Andy avatar
    4 posts
    Member since:
    Jun 2009

    Posted 17 Jun 2009 Link to this post

    I'm trying to use the RadUpload control inside of a JQuery dialog in a ASP.Net page.  I'm having a problem with the RadUpload complaining that it's not inside of a form.  The message I get is "RadUpload requires to be in a form tag to operate properly!".

    The behavior of JQuery is to take any html component it wraps in a dialog and to move it out to just before the end of the body element (this is done because some browsers have trouble rendering items in absolute coordinates, when they are in other html containers).  This causes that part of the html to go outside of the ASP.Net form.  So now the RadUpload is outside of the form...

    In the dialog's ok button, I move the dialog contents back inside the form, just before submitting the form.  This moves all the items back to the form and submits them correctly.  This all works except for that annoying message I get from the RadUpload every time the page runs.  Is there a way to turn off this message, and tell the RadUpload that I know what I'm doing, and it should stop complaining?

    Thanks

    Andy
  2. Veselin Vasilev
    Admin
    Veselin Vasilev avatar
    2992 posts

    Posted 18 Jun 2009 Link to this post

    Hello Andy,

    Any server control should be placed between the <form> </form> tags.
    You can replace the RadUpload with the standard FileUpload control and you will see the same error.

    All the best,
    Veselin Vasilev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Andy
    Andy avatar
    4 posts
    Member since:
    Jun 2009

    Posted 18 Jun 2009 Link to this post

    You obviously didn't understand my post and didn't test your replacement suggestion.  I just did that test for the ASP.Net file upload server control inside of a JQuery dialog, and it doesn't give me the client side pop up saying it needs to be inside of a form.

    Let me explain a bit more.  When the ASP.Net page is designed, the RadUpload control is placed inside of it.  That puts it inside of the ASP.Net postback form.  All good.  Then on page load, the JQuery system moves the client side implementation of the RadUpload outside of the form as described in my original post.  Now, it's obvious, that the RadUpload control client side scripts to do some sort of test to see if the control is inside of a form.  If it's not inside of a form, it brings up that annoying popup.  This is the popup I'm trying to disable.

    When I dismiss the popup, and then use the RadUpload control to upload files, it all works fine.  That's because before I submit the form, in the JQuery dialog ok button handler, I move the contents of the JQuery dialog (the html components that were moved out of the form) back into the form.

    So to summarize. I use the RadUpload, it gets moved out of the form on the client by JQuery.  It complains that it's not inside of the form.  I dismiss the dialog.  I use the RadUpload control to select files to upload, which works fine.  When I hit the ok button in the dialog, the data from the RadUpload control gets moved back to the form, so the files get uploaded fine.  So I just want to remove that client side dialog saying that the RadUpload is not inside of a form.  I know it's not inside of a form on the client, it's on purpose!  What I'm looking for is for some sort of Server side flag on the control that allows me to disable client side in-form checking...

    This is a show stopper for me.  If I can't get rid of this dialog, I'll have to find a different option for doing multiple file uploads.  I heard Telerik will start supporting JQuery, this would cause some problems in supporting JQuery UI.
  5. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 19 Jun 2009 Link to this post

    Hello Andy,

    RadUpload was not designed with jQuery dialogs in mind. Also there is no server side property which could disable the form detection JavaScript code. The only solution I can offer is to override the JavaScript function which detects whether RadUpload is placed inside a form:

        <form id="form1" runat="server">
        <script type="text/javascript">
       
        Telerik.Web.UI.RadUpload.prototype._updateFormProperties = function(form)
        {
            if (form)
            {
                form.enctype = form.encoding = "multipart/form-data";
            }
        }
           
        </script>

    Regards,
    Albert
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  6. Andy
    Andy avatar
    4 posts
    Member since:
    Jun 2009

    Posted 19 Jun 2009 Link to this post

    Thank you.  I will test this, and if it works, that will solve my problems.
  7. Andy
    Andy avatar
    4 posts
    Member since:
    Jun 2009

    Posted 26 Jun 2009 Link to this post

    The JavaScript function override solution worked!  Thanks a lot.
  8. Robert
    Robert avatar
    49 posts
    Member since:
    Sep 2008

    Posted 13 Aug 2009 Link to this post

    I have this same error as well except my Radupload is inside a custom edit form on the radgrid any idea why it is doing this
    <%@ Page Language="VB" AutoEventWireup="false" CodeFile="Documentmanagement.aspx.vb" Inherits="AdminFiles_Documentmanagement" %> 
     
    <%@ Register assembly="Telerik.Web.UI, Version=2009.1.311.20, Culture=neutral, PublicKeyToken=121fae78165ba3d4" namespace="Telerik.Web.UI" tagprefix="telerik" %> 
     
    <!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>  
        <style type="text/css">  
            .style1  
            {  
                width: 500px;  
                height: 50px;  
            }  
        </style> 
    </head> 
    <body background="../Images/bg-fade.gif">  
        <form id="form1" runat="server">  
     
     
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">  
        </telerik:RadScriptManager> 
        <div> 
          
            <img alt="" class="style1" src="../Images/Admin-Documentmanagement.png" /></div>  
        <telerik:RadSkinManager ID="RadSkinManager1" Runat="server" Skin="Telerik">  
        </telerik:RadSkinManager> 
        <telerik:RadAjaxManager runat="server">  
        </telerik:RadAjaxManager> 
        <asp:SqlDataSource ID="SqlDataSource1" runat="server"   
            ConnectionString="<%$ ConnectionStrings:GulfCoastConnectionString %>"   
              
            SelectCommand="SELECT linkid AS Linkid, linkid AS linkid1, Treeviewname, Parentid, Linkname, LinkDescription, linkurl FROM Documentresource"   
            InsertCommand="INSERT INTO Documentresource(Parentid, Linkname, LinkDescription, linkurl) VALUES (@parentid, @Linkname, @LinkDescription, @Linkurl)"   
              
              
            UpdateCommand="UPDATE Documentresource SET Parentid = @Parentid, Linkname = @Linkname, LinkDescription = @LinkDescription, linkurl = @Linkurl WHERE (linkid = @Linkid1)">  
            <UpdateParameters> 
                <asp:Parameter Name="Parentid" /> 
                <asp:Parameter Name="Linkname" /> 
                <asp:Parameter Name="LinkDescription" /> 
                <asp:Parameter Name="Linkurl" /> 
                <asp:Parameter Name="Linkid1" /> 
                <asp:Parameter Name="Linkid" /> 
            </UpdateParameters> 
            <InsertParameters> 
                <asp:Parameter Name="Parentid" /> 
                <asp:Parameter Name="Linkname" /> 
                <asp:Parameter Name="linkdescription" /> 
                <asp:Parameter Name="linkurl" /> 
            </InsertParameters> 
        </asp:SqlDataSource> 
        <asp:SqlDataSource ID="SqlDataSource2" runat="server"   
            ConnectionString="<%$ ConnectionStrings:GulfCoastConnectionString %>"   
              
              
            SelectCommand="SELECT linkid, Linkname, Parentid FROM Documentresource WHERE (linkid &lt;&gt; @Linkid)"   
              
              
            UpdateCommand="Update Documentresource Set Parentid=@Parentid,LinkName=@Linkname,LinkDescription=@LinkDescription,Linkurl=@Linkurl Where Linkid=@Linkid1">  
            <SelectParameters> 
                <asp:ControlParameter ControlID="RadGrid1" DefaultValue="0" Name="linkid"   
                                PropertyName="SelectedValue" /> 
            </SelectParameters> 
            <UpdateParameters> 
                <asp:Parameter Name="Parentid" /> 
                <asp:Parameter Name="Linkid1" /> 
                <asp:Parameter Name="Linkname" /> 
                <asp:Parameter Name="LinkDescription" /> 
                <asp:Parameter Name="Linkurl" /> 
                <asp:Parameter Name="Linkid" /> 
            </UpdateParameters> 
        </asp:SqlDataSource> 
        <asp:SqlDataSource ID="SqlDataSource3" runat="server"   
            ConnectionString="<%$ ConnectionStrings:GulfCoastConnectionString %>"   
            SelectCommand="SELECT TOP (1) linkid + 1 AS nextid FROM Documentresource ORDER BY linkid DESC">  
        </asp:SqlDataSource> 
        <telerik:RadGrid ID="RadGrid1" runat="server" AllowAutomaticDeletes="True"   
            AllowAutomaticInserts="True" AllowAutomaticUpdates="True"   
            AutoGenerateEditColumn="True" DataSourceID="SqlDataSource1" GridLines="None"   
            ShowGroupPanel="True" AllowPaging="True">  
    <MasterTableView AutoGenerateColumns="False" CellSpacing="-1"   
                DataSourceID="SqlDataSource1" CommandItemDisplay="Top">  
        <SelfHierarchySettings KeyName="Linkid" ParentKeyName="Parentid" /> 
        <Columns> 
            <telerik:GridBoundColumn DataField="Linkid" DataType="System.Int32"   
                HeaderText="Linkid" ReadOnly="True" SortExpression="Linkid"   
                UniqueName="Linkid">  
            </telerik:GridBoundColumn> 
            <telerik:GridBoundColumn DataField="Treeviewname"   
                HeaderText="Treeviewname" SortExpression="Treeviewname"   
                UniqueName="Treeviewname">  
            </telerik:GridBoundColumn> 
            <telerik:GridBoundColumn DataField="Parentid" HeaderText="Parentid"   
                SortExpression="Parentid" UniqueName="Parentid" DataType="System.Int32">  
            </telerik:GridBoundColumn> 
            <telerik:GridBoundColumn DataField="Linkname"   
                HeaderText="Linkname" SortExpression="Linkname"   
                UniqueName="Linkname">  
            </telerik:GridBoundColumn> 
            <telerik:GridBoundColumn DataField="LinkDescription" HeaderText="LinkDescription"   
                SortExpression="LinkDescription" UniqueName="LinkDescription">  
            </telerik:GridBoundColumn> 
            <telerik:GridBoundColumn DataField="linkurl" HeaderText="linkurl"   
                SortExpression="linkurl" UniqueName="linkurl">  
            </telerik:GridBoundColumn> 
        </Columns> 
        <EditItemTemplate> 
            <br /> 
            <br /> 
        </EditItemTemplate> 
    <RowIndicatorColumn> 
    <HeaderStyle Width="20px"></HeaderStyle> 
    </RowIndicatorColumn> 
     
    <ExpandCollapseColumn> 
    <HeaderStyle Width="20px"></HeaderStyle> 
    </ExpandCollapseColumn> 
        <EditFormSettings EditFormType="Template">  
            <FormTemplate> 
                </td> 
                <asp:Label ID="Label6" runat="server"   
                    Text='<%# IIf((TypeOf(Container) is GridEditFormInsertItem), "Create New Resource Link", "Edit Resource Link") %>'   
                    Font-Size="Large" ForeColor="Blue"></asp:Label> 
                <br /> 
                <asp:Label ID="Label5" runat="server" Text="Parent Group"></asp:Label> 
                <br /> 
                <asp:ListBox ID="Parentid" runat="server" DataSourceID="SqlDataSource2"   
                    DataTextField="Linkname" DataValueField="linkid"   
                    SelectedValue='<%# Bind("Parentid") %>'   
                    AppendDataBoundItems="True" Height="350px">  
                    <asp:ListItem Value="">Self (Group Header)</asp:ListItem> 
                </asp:ListBox> 
                
                <asp:Label ID="linkid" runat="server" Text='<%# Bind("linkid1") %>'></asp:Label> 
                <br /> 
                <asp:TextBox ID="Linkname" runat="server" Text='<%# Bind("Linkname") %>'   
                    Width="300px"></asp:TextBox> 
                <asp:Label ID="Label2" runat="server" Text="Linkname"></asp:Label> 
                <br /> 
                <asp:TextBox ID="LinkDescription" runat="server"   
                    Text='<%# Bind("LinkDescription") %>' Width="300px"></asp:TextBox> 
                <asp:Label ID="Label3" runat="server" Text="Link Description"></asp:Label> 
                <br /> 
                <asp:TextBox ID="Linkurl" runat="server" Text='<%# Bind("linkurl") %>'   
                    Width="300px"></asp:TextBox> 
                <asp:Label ID="Label4" runat="server" Text="LinkUrl"></asp:Label> 
                <br /> 
                <br /> 
                Select File to Upload<br /> 
                <div> 
                    <telerik:RadUpload ID="RadUpload1" Runat="server"   
                        EnableFileInputSkinning="False" Skin="Black">  
                    </telerik:RadUpload> 
                </div> 
                <br /> 
                <asp:Button ID="btnUpdate" Text='<%# IIf((TypeOf(Container) is GridEditFormInsertItem), "Insert", "Update") %>' 
                                            runat="server"   
                    CommandName='<%# IIf((TypeOf(Container) is GridEditFormInsertItem), "PerformInsert", "Update")%>'   
                    onclick="btnUpdate_Click">  
                                        </asp:Button> 
    <asp:Button ID="btnCancel" Text="Cancel" runat="server" CausesValidation="False" 
    CommandName="Cancel"></asp:Button> 
                <br /> 
                <br />               &nbsp;  
                <br /> 
                <br /> 
                <div> 
                </div> 
            </FormTemplate> 
        </EditFormSettings> 
    </MasterTableView> 
            <GroupingSettings GroupByFieldsSeparator=";" /> 
            <ClientSettings AllowDragToGroup="True">  
            </ClientSettings> 
        </telerik:RadGrid> 
        <telerik:RadTreeView ID="RadTreeView1" Runat="server" AllowNodeEditing="True"   
            DataFieldID="linkid" DataFieldParentID="Parentid"   
            DataNavigateUrlField="linkurl" DataSourceID="SqlDataSource1"   
            DataTextField="Linkname" DataValueField="LinkDescription"   
            AppendDataBoundItems="True">  
            <Nodes> 
                <telerik:RadTreeNode runat="server" Text="Home" Value="0">  
                </telerik:RadTreeNode> 
            </Nodes> 
        </telerik:RadTreeView> 
        </form> 
    </body> 
    </html> 
     
  9. Sergey
    Sergey avatar
    22 posts
    Member since:
    Jun 2009

    Posted 05 Mar 2010 Link to this post

    I was also trying to do what the initial post said, being that I use the RadUpload inside of a JQuery UI Dialog box, but I get the same error (RadUpload requires to be in a form tag to operate properly!).

    On the page, I setup the dialog box:
    $(document).ready(function () { 
                $("#InterviewPopup").dialog({ 
                    autoOpen: false
                    modal: true
                    bgiframe: true
                    width: 455 
                }); 
            }); 

    On a RadToolBar button click, I open the dialog box:
    ClientScript.RegisterStartupScript(GetType(), "interview""$(document).ready(function() { $('#InterviewPopup').dialog('open'); });"true); 

    I have tried using the javascript override to no success and if I use an asp:UploadFile control, there is no form error.

    Thanks!
    Sergey
  10. Genady Sergeev
    Admin
    Genady Sergeev avatar
    1596 posts

    Posted 09 Mar 2010 Link to this post

    Hi Sergey,

    The JavaScript override work around works, you need to place it right after the ScriptManager. Example:

    <asp:ScriptManager runat="server" ID="ScriptManager1">
    </asp:ScriptManager>
     
    <script type="text/javascript">
        Telerik.Web.UI.RadUpload.prototype._updateFormProperties = function(form) {
            if (form) {
                form.enctype = form.encoding = "multipart/form-data";
            }
        }
    </script>


    Sincerely yours,
    Genady Sergeev
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  11. Mario
    Mario avatar
    24 posts
    Member since:
    Apr 2009

    Posted 17 Oct 2011 Link to this post

    Hey Andy, would you please post the jquery code that move the radUpload back into the form

    Thanks
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017