RadUpload in RadPanelBar

[Jugoslav]

While one that is not in te RadPanelBar works perfect the another one simply does not work. No exceptions. Just does not work!

<form id="form1" runat="server">
    <telerik:RadScriptManager ID="MyScriptManager" runat="server" />
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
    <AjaxSettings>
    <telerik:AjaxSetting AjaxControlID="RadPanelBar1">
    <UpdatedControls>
    <telerik:AjaxUpdatedControl ControlID="RadPanelBar1" LoadingPanelID="LoadingPanelBasicDesign" />
    </UpdatedControls>
    </telerik:AjaxSetting>
    </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel ID="LoadingPanelBasicDesign" runat="server" Skin="Windows7" />
    <div>
    <telerik:RadScriptBlock runat="server" ID="KKLj">
    <script type="text/javascript">
        function SubmitTheFile() {
            var panel = $find("<%= RadPanelBar1.ClientID %>");
            var item = panel.findItemByValue("BodyStyle");
            if (item) {
                var mybutton = item.findControl("SubmitBodyBgImage");
                mybutton.click();
            } else {
                alert("Not Found!");
            }
        }

        function submitFile(sender, e) {
            $get("<%= Button1.ClientID %>").click();
        }
    </script>
    </telerik:RadScriptBlock>
    <telerik:RadPanelBar ID="RadPanelBar1" runat="server" Skin="Windows7" Width="690px" ExpandAnimation-Type="InElastic" ExpandMode="FullExpandedItem">
    <Items>
        <telerik:RadPanelItem Text="Body Style" Value="BodyStyle">
        <ItemTemplate>
        <div style="padding: 10px;">
        <table cellpadding="5" cellspacing="0" width="100%" style="padding: 10px;">
        <col width="170px" />

        <tr>
        <td>Background Image Upload:</td>
        <td valign="bottom">
        <telerik:RadUpload ID="BodyBgImageUpload" runat="server" TargetFolder="~/ftp"
            MaxFileSize="1024" ControlObjectsVisibility="None" OnClientFileSelected="SubmitTheFile" />
            <telerik:RadButton ID="SubmitBodyBgImage" runat="server" Text="Button" Style="visibility: hidden;" />
        </td>
        </tr>
        </table>
        </div>
        </ItemTemplate>
        </telerik:RadPanelItem>
    </Items>
    </telerik:RadPanelBar>

    <telerik:radupload id="RadUpload1" runat="server" onclientfileselected="submitFile" targetfolder="~/ftp" />
    <telerik:RadButton ID="Button1" runat="server" Text="Button" Style="visibility: hidden;" />

    </div>
    </form>

[Cori]

Hello Jugoslav,

The function you set for OnClientFileSelected doesn't have the right method signature. Your method currently looks something like this:

function SubmitTheFile() {
     .....Code.....
}

When it should look like this:

function SubmitTheFile(sender, args) {
     .....Code.....
}

I hope that helps.

[Jugoslav]

Nope. It changed nothing. In addition that the RadUpload control which is not nested in RadPanelBar works like a charm even without the fix you propose. It must be something obvious that i am missing. Thanks anyway. It is much appreciated!

[Jugoslav]

actually it does not work when its inside RadPanelBar no matter what. 
I even click the upload button manually. I went further and removed ajax manager from the page but it is still not working. 

Is there anyone that can confirm that RadUpload can work when it's in RadPanelBar at all? THANK YOU

[Helen]

Hello Jugoslav,

I just answered your support ticket regarding the same problem. Please find below a sample which works at our side. Does it work at your side?

<form id="form1" runat="server">
<telerik:RadScriptManager ID="MyScriptManager" runat="server" />
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" EnableAJAX="false">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="RadPanelBar1">
<UpdatedControls>
    <telerik:AjaxUpdatedControl ControlID="RadPanelBar1" LoadingPanelID="LoadingPanelBasicDesign" />
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManager>
<telerik:RadAjaxLoadingPanel ID="LoadingPanelBasicDesign" runat="server" Skin="Windows7" />
<div>
<telerik:RadScriptBlock runat="server" ID="KKLj">
<script type="text/javascript">
function SubmitTheFile() {
    var panel = $find("<%= RadPanelBar1.ClientID %>");
    var item = panel.findItemByValue("BodyStyle");
    if (item) {
    var mybutton = item.findControl("SubmitBodyBgImage");
    mybutton.click();
    } else {
    alert("Not Found!");
    }
}

function submitFile(sender, e) {
    $get("<%= Button1.ClientID %>").click();
}
</script>
</telerik:RadScriptBlock>
<telerik:RadPanelBar ID="RadPanelBar1" runat="server" Skin="Windows7" Width="690px"
    ExpandAnimation-Type="InElastic" ExpandMode="FullExpandedItem">
<Items>
<telerik:RadPanelItem Text="Body Style" Value="BodyStyle">
    <ItemTemplate>
    <div style="padding: 10px;">
        <table cellpadding="5" cellspacing="0" width="100%" style="padding: 10px;">
        <col width="170px" />
        <tr>
            <td>
            Background Image Upload:
            </td>
            <td valign="bottom">
            <telerik:RadUpload ID="BodyBgImageUpload" runat="server" TargetFolder="ftp"
                ControlObjectsVisibility="None" OnClientFileSelected="SubmitTheFile" />
            <telerik:RadButton ID="SubmitBodyBgImage" runat="server" Text="Button" Style="visibility: hidden;" />
            </td>
        </tr>
        </table>
    </div>
    </ItemTemplate>
</telerik:RadPanelItem>
</Items>
</telerik:RadPanelBar>
<telerik:RadUpload ID="RadUpload1" runat="server" OnClientFileSelected="SubmitTheFile"
    TargetFolder="ftp" />
<telerik:RadButton ID="Button1" runat="server" Text="Button" Style="visibility: hidden;" />
</div>
</form>

Regards,
Helen
the Telerik team

[Jugoslav]

but with Ajax disabled i lost the loading panel effect and stuff. :( 

Ok at least it works now. Btw, can you please help me to assign the filename to RadTextBox when Uploading process is initialized once?

E.g. i select file file.jpg and then when FileSelected event is raised to set Text property of RadTextBox1 to file.jpg as well?

Thanks 

[Jugoslav]

I modified the script for a while so now i have the following:

function SubmitBodyImage() {
        var panel = $find("<%= RadPanelBar1.ClientID %>");
        var item = panel.findItemByValue("BodyStyle");
        if (item) {
            var submitbutton = item.findControl("SubmitBodyBgImage"); // RadButton control
            submitbutton.click();

            var imageurl = item.findControl("BodyBgImageUrl"); // RadTextBox control
            var radupload = item.findControl("BodyBgImageUpload"); // RadUpload control
            var fileInputs = getRadUpload(radupload.id).getFileInputs();
            imageurl.value = fileInputs[0].value;

        } else {
            alert("Not Found!");
        }
    }

But, as you guess although it does not throw an exception the value (uploaded file path/name) is not assigned at all. Any ideas why? 

[Helen]

Hello Jugoslav,

I just answered your support ticket. Could you please review our answer and let us know how it goes?

Regards,
Helen
the Telerik team

[Jugoslav]

Ok but in this way the file is never uploaded. How do i upload the file and then set the textbox value?
Maybe if i use ViewState/hiddenField or something? Please advice.

Thanks

[Helen]

Hi Jugoslav,

You may use a hidden field to store the file name and then retrieve it server-side.

Greetings,
Helen
the Telerik team

[Jugoslav]

Hmm when i thought for a moment that this is resolved finally i got this error:

Message: 'null' is null or not an object

The exception is thrown on this line:

hidden.value = fileInputs[0].value;

Don;t know why though. The HiddenField is outside RadPanelBar no doubt. The only difference is that it is content page but it shouldn't matter i guess. 

Any ideas why this happens? If i remove this line and i set Default value of the Hidden field to "something blah" it displayed in the RadTextBox as expected. I just cannot assign new filename to the Hidden Field. Weird i know. It should be pretty simple and str8 forward. 

Thanks for any further assistance. 

[Jugoslav]

I've found it :)

It was this line:
var hidden = $get("HiddenField1");

if i change it to:

var hidden = $get("<%= HiddenField1.ClientID %>"); 

IT WORKS!!!!!

Thank you guys. Your help is much appreciated.