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

RadAjaxLoadingPanel not showing when I add RadUpload to grid

5 Answers 216 Views

Grid

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

darenkov asked on 07 Oct 2009, 03:36 PM

I have a functional RadGrid with an RadUpload control in the editTemplate. I am also using a RadAjaxManager in which the Grid references itself. For some reason, the LoadingPanel doesn't display (even though I have set the panel in the RadAjaxManager). The loading panel worked fine until I added in the upload control and javascript conditionalPostback code. I've even tried adding a button and label to print some text and although it ajaxifies it still doesn't display the loader (and it's not because of the image).

    
            <%@ Page Language="C#" AutoEventWireup="true" CodeFile="gridupload.aspx.cs" Inherits="admin_gridupload" %> 
        
            <%@ Register assembly="Telerik.Web.UI" 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 id="Head1" runat="server"> 
        
                <title></title> 
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server"> 
        
                        <telerik:radscriptblock id="RadScriptBlock1" runat="server"> 
        
                            <script type="text/javascript"> 
        
                                //On insert and update buttons click temporarily disables ajax to perform upload actions                     
        
                                function conditionalPostback(e, sender) { 
        
                                    var theRegexp = new RegExp("\.UpdateButton$|\.PerformInsertButton$", "ig"); 
        
                                    if (sender.EventTarget.match(theRegexp)) { 
        
                                        var upload = $find(window['UploadId']); 
        
                                        //AJAX is disabled only if file is selected for upload 
        
                                        if (upload.getFileInputs()[0].value != "") { 
        
                                            sender.EnableAjax = false; 
        
                                        } 
        
                                    } 
        
                                }     
        
                            </script> 
        
                        </telerik:radscriptblock> 
        
                        <telerik:RadAjaxManager ID="AjaxManager1" runat="server"> 
        
                        <ClientEvents OnRequestStart="conditionalPostback"/> 
        
                        <AjaxSettings>         
        
                            <telerik:AjaxSetting AjaxControlID="RadGrid1"> 
        
                                <UpdatedControls > 
        
                                    <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" /> 
        
                                </UpdatedControls> 
        
                            </telerik:AjaxSetting>           
        
                        </AjaxSettings>          
        
                        </telerik:RadAjaxManager> 
        
                <div> 
        
                        <telerik:RadProgressManager ID="RadProgressManager1" Runat="server" /> 
        
                <telerik:RadProgressArea ID="RadProgressArea1" Runat="server"> 
        
                </telerik:RadProgressArea> 
        
                    <telerik:RadGrid ID="RadGrid1" runat="server" DataSourceID="odsVideo"  
        
                        GridLines="None" AutoGenerateColumns="False"  
        
                        oninsertcommand="RadGrid1_InsertCommand"> 
        
            <MasterTableView  
        
                CommandItemDisplay="Top"  
        
                DataKeyNames="VideoID"  
        
                EditMode="EditForms" 
        
                DataSourceID="odsVideo"> 
        
                <EditItemTemplate> 
        
                    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> 
        
                </EditItemTemplate> 
        
            <RowIndicatorColumn> 
        
            <HeaderStyle Width="20px"></HeaderStyle> 
        
            </RowIndicatorColumn> 
        
            <ExpandCollapseColumn> 
        
            <HeaderStyle Width="20px"></HeaderStyle> 
        
            </ExpandCollapseColumn> 
        
                <Columns> 
        
                    <telerik:GridEditCommandColumn> 
        
                    </telerik:GridEditCommandColumn> 
        
                    <telerik:GridBoundColumn DataField="VideoID" DataType="System.Int32"  
        
                        HeaderText="VideoID" ReadOnly="True" SortExpression="VideoID"  
        
                        UniqueName="VideoID"> 
        
                    </telerik:GridBoundColumn> 
        
                    <telerik:GridTemplateColumn DataField="Title" HeaderText="Title"  
        
                        SortExpression="Title" UniqueName="Title"> 
        
                        <EditItemTemplate> 
        
                            <asp:TextBox ID="txtTitle" runat="server" Text='<%# Bind("Title") %>'></asp:TextBox> 
        
                        </EditItemTemplate> 
        
                        <ItemTemplate> 
        
                            <asp:Label ID="TitleLabel" runat="server" Text='<%# Eval("Title") %>'></asp:Label> 
        
                        </ItemTemplate> 
        
                    </telerik:GridTemplateColumn> 
        
                    <telerik:GridTemplateColumn DataField="FileName" DataType="System.Guid"  
        
                        HeaderText="FileName" SortExpression="FileName" UniqueName="FileName"> 
        
                        <EditItemTemplate> 
        
                            <telerik:RadUpload ID="RadUpload1" Runat="server"> 
        
                            </telerik:RadUpload>  
        
                        </EditItemTemplate> 
        
                        <ItemTemplate> 
        
                            <asp:Label ID="FileNameLabel" runat="server" Text='<%# Eval("FileName") %>'></asp:Label> 
        
                        </ItemTemplate> 
        
                    </telerik:GridTemplateColumn> 
        
                    <telerik:GridBoundColumn DataField="Minutes" DataType="System.Int32"  
        
                        HeaderText="Minutes" SortExpression="Minutes" UniqueName="Minutes"> 
        
                    </telerik:GridBoundColumn> 
        
                    <telerik:GridBoundColumn DataField="Seconds" DataType="System.Int32"  
        
                        HeaderText="Seconds" SortExpression="Seconds" UniqueName="Seconds"> 
        
                    </telerik:GridBoundColumn> 
        
                    <telerik:GridBoundColumn DataField="DateAdded" DataType="System.DateTime"  
        
                        HeaderText="DateAdded" SortExpression="DateAdded" UniqueName="DateAdded"> 
        
                    </telerik:GridBoundColumn> 
        
                    <telerik:GridBoundColumn DataField="SeriesID" DataType="System.Int32"  
        
                        HeaderText="SeriesID" SortExpression="SeriesID" UniqueName="SeriesID"  
        
                        Visible="False"> 
        
                    </telerik:GridBoundColumn> 
        
                    <telerik:GridBoundColumn DataField="Ranking" DataType="System.Int32"  
        
                        HeaderText="Ranking" SortExpression="Ranking" UniqueName="Ranking"  
        
                        Visible="False"> 
        
                    </telerik:GridBoundColumn> 
        
                    <telerik:GridCheckBoxColumn DataField="IsActive" DataType="System.Boolean"  
        
                        HeaderText="IsActive" SortExpression="IsActive" UniqueName="IsActive"> 
        
                    </telerik:GridCheckBoxColumn> 
        
                </Columns> 
        
            <EditFormSettings> 
        
            <EditColumn UniqueName="EditCommandColumn1"></EditColumn> 
        
            </EditFormSettings> 
        
            </MasterTableView> 
        
            </telerik:RadGrid>         
        
                </div> 
        
                <asp:ObjectDataSource ID="odsVideo" runat="server"  
        
                    DataObjectTypeName="MySample.BusinessObjects.Video"  
        
                    DeleteMethod="Delete" InsertMethod="Insert"  
        
                    OldValuesParameterFormatString="original_{0}" SelectMethod="GetItems"  
        
                    TypeName="MySample.BusinessLogic.VideoManager"  
        
                    UpdateMethod="Update"> 
        
                    <DeleteParameters> 
        
                        <asp:Parameter Name="videoID" Type="Int32" /> 
        
                    </DeleteParameters> 
        
                </asp:ObjectDataSource> 
        
                <telerik:RadScriptManager ID="RadScriptManager1" Runat="server"> 
        
                </telerik:RadScriptManager> 
        
                <br /> 
        
                <br />         
        
                        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Height="16px" 
        
                Transparency="50" Width="16px"> 
        
                <img alt="Loading..." src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading.gif") %>' 
        
                    style="border: 0px;" /> 
        
            </telerik:RadAjaxLoadingPanel> 
        
                </form> 
        
            </body> 
        
            </html>

5 Answers, 1 is accepted

answered on 08 Oct 2009, 07:59 AM

Hello Daren,

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.
Please find more information in the following links:
Using RadUpload in an Ajaxified Grid
Uploading Files with AJAX

Greetings,
Pavlina
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

answered on 09 Oct 2009, 02:34 PM

radupload.zip

Hello Daren,

I am sending you a simple working project which handles the desired functionality. Please give it a try a
nd let me know if you need additional assistance.

I hope this helps.

Kind regards,
Pavlina
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.