This is a migrated thread and some comments may be shown as answers.

File Upload using RadAjaxPanel, RadAjaxLodingPanel and RadAjaxManager

9 Answers 463 Views

Ajax

This is a migrated thread and some comments may be shown as answers.

Jessie asked on 10 Sep 2009, 08:22 AM

Hi,

I'm using RadUpload to upload the photo.

After I selected the photo and click the Upload Button, I want to refresh the image in DataList only by using RadAjaxPanel, RadAjaxLodingPanel and RadAjaxManager.

I don't want the whole page doing the postback. How can i do that?

    
            <telerik:RadUpload ID="uplPhoto" runat="server" ControlObjectsVisibility="None" MaxFileInputsCount="1" > 
        
                    </telerik:RadUpload> 
        
                    <asp:Button ID="btnUpload" runat="server" Text="Upload" onclick="btnUpload_Click" /> 
        
            <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server">  
        
                    <asp:DataList ID="dtlPhoto" runat="server" DataKeyField="CreatedBy"   
        
                        DataSourceID="odsPhoto" RepeatDirection="Horizontal" RepeatColumns="3"   
        
                        onitemdatabound="dtlBlogPhoto_ItemDataBound">  
        
                        <ItemTemplate> 
        
                            <img id="img1" alt="" src='<%# Eval("Location") %>' /> 
        
                        </ItemTemplate> 
        
                    </asp:DataList> 
        
                    </telerik:RadAjaxPanel> 
        
            <telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxy1" runat="server">  
        
                        <AjaxSettings> 
        
                            <telerik:AjaxSetting AjaxControlID="btnUpload">  
        
                                <UpdatedControls> 
        
                                    <telerik:AjaxUpdatedControl ControlID="dtlPhoto"   
        
                                        LoadingPanelID="RadAjaxLoadingPanel1" /> 
        
                                </UpdatedControls> 
        
                            </telerik:AjaxSetting> 
        
                        </AjaxSettings> 
        
                    </telerik:RadAjaxManagerProxy> 
        
                    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default">  
        
                    </telerik:RadAjaxLoadingPanel>

Thanks.

Regards,
Jessie

9 Answers, 1 is accepted

answered on 10 Sep 2009, 09:56 AM

Hi Pavlina,

Thanks for your reply.

I had tried yr recommendation(as below) but it still will refresh the whole page. I just want to refresh the DataList only after click the Upload button. Thanks.

    
            <telerik:RadUpload ID="uplPhoto" runat="server" ControlObjectsVisibility="None" MaxFileInputsCount="1">  
        
            </telerik:RadUpload> 
        
            <asp:Panel ID="Panel1" runat="server">  
        
            <asp:Button ID="btnUpload" runat="server" Text="Upload" onclick="btnUpload_Click" /> 
        
            </asp:Panel> 
        
            <telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxy1" runat="server">  
        
                        <AjaxSettings> 
        
                            <telerik:AjaxSetting AjaxControlID="btnUpload">  
        
                                <UpdatedControls> 
        
                                    <telerik:AjaxUpdatedControl ControlID="dtlPhoto"   
        
                                        LoadingPanelID="RadAjaxLoadingPanel1" /> 
        
                                </UpdatedControls> 
        
                            </telerik:AjaxSetting> 
        
                        </AjaxSettings> 
        
                    </telerik:RadAjaxManagerProxy>

answered on 11 Sep 2009, 02:43 AM

Hi Pavlina,

Thanks for your help.

I just replace RadAjaxManagerProxy with RadAjaxManager control and then wrap my JavaScript code in RadCodeBlock but I still have 1 problem.

When I select the photo and click Upload button, the uplPhoto.UploadedFiles.Count become 0.

    
            <telerik:RadUpload ID="uplPhoto" runat="server" ControlObjectsVisibility="None" MaxFileInputsCount="1">     
        
            </telerik:RadUpload>    
        
            <asp:Button ID="btnUpload" runat="server" Text="Upload" onclick="btnUpload_Click" />    
        
            <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">     
        
                        <AjaxSettings>    
        
                            <telerik:AjaxSetting AjaxControlID="btnUpload">     
        
                                <UpdatedControls>    
        
                                    <telerik:AjaxUpdatedControl ControlID="dtlPhoto"      
        
                                        LoadingPanelID="RadAjaxLoadingPanel1" />    
        
                                </UpdatedControls>    
        
                            </telerik:AjaxSetting>    
        
                        </AjaxSettings>    
        
                    </telerik:RadAjaxManager>

answered on 20 Oct 2014, 08:18 AM

Hello,

RadUpload cannot upload files using AJAX calls. This is a limitation of the XmlHttpRequest component, used in all AJAX frameworks for asynchronous calls to the application. In order to upload a file your application must perform a full page postback. You cannot use AJAX behavior while uploading files. For more information on the subject you can refer to the article below:
http://www.telerik.com/help/aspnet-ajax/upload-uploading-ajax.html

Regards,

Pavlina
Telerik

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.