RadUpload in RadPanelBar

Thread is closed for posting
12 posts, 1 answers
  1. Jugoslav
    Jugoslav avatar
    64 posts
    Member since:
    Mar 2011

    Posted 24 May 2011 Link to this post

    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>
  2. Cori
    Cori avatar
    562 posts
    Member since:
    Jul 2010

    Posted 25 May 2011 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Jugoslav
    Jugoslav avatar
    64 posts
    Member since:
    Mar 2011

    Posted 25 May 2011 Link to this post

    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!
  5. Jugoslav
    Jugoslav avatar
    64 posts
    Member since:
    Mar 2011

    Posted 26 May 2011 Link to this post

    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
  6. Helen
    Admin
    Helen avatar
    1052 posts

    Posted 26 May 2011 Link to this post

    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

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  7. Jugoslav
    Jugoslav avatar
    64 posts
    Member since:
    Mar 2011

    Posted 26 May 2011 Link to this post

    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 
  8. Jugoslav
    Jugoslav avatar
    64 posts
    Member since:
    Mar 2011

    Posted 26 May 2011 Link to this post

    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? 
  9. Helen
    Admin
    Helen avatar
    1052 posts

    Posted 27 May 2011 Link to this post

    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

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  10. Jugoslav
    Jugoslav avatar
    64 posts
    Member since:
    Mar 2011

    Posted 27 May 2011 Link to this post

    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
  11. Answer
    Helen
    Admin
    Helen avatar
    1052 posts

    Posted 27 May 2011 Link to this post

    Hi Jugoslav,

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

    Greetings,
    Helen
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  12. Jugoslav
    Jugoslav avatar
    64 posts
    Member since:
    Mar 2011

    Posted 27 May 2011 Link to this post

    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. 
  13. Jugoslav
    Jugoslav avatar
    64 posts
    Member since:
    Mar 2011

    Posted 27 May 2011 Link to this post

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