RadUpload and JQuery dialogs

[Andy]

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

[Veselin Vasilev]

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.

[Andy]

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.

[Atanas Korchev]

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.

[Andy]

Thank you.  I will test this, and if it works, that will solve my problems.

[Andy]

The JavaScript function override solution worked!  Thanks a lot.

[Robert]

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>

[Sergey]

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

[Genady Sergeev]

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.

[Mario]

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

Thanks