AjaxLoadingPanel is not working (Provided sample working code)

5 posts, 0 answers
  1. LearnTelirik
    LearnTelirik avatar
    2 posts
    Member since:
    Sep 2012

    Posted 31 Oct 2012 Link to this post

    Hi,

     

    I am new to Telerik controls. I recently started using these controls.
    I have a situation where user select a file and click on the button then I want to show ajax loading image on the panel below that button.
    also i want to update panel content with filename.
    I tried this example but no use
    http://demos.telerik.com/aspnet-ajax/ajax/examples/loadingpanel/loadingimages/defaultcs.aspx

    My telerik controls version is : 2012.2.607.40


    This is my sample working code.

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
     
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <head runat="server">
        <title>Untitled Page</title>
        <style type="text/css">
            .module1
            {
                background-color: #dff3ff;
                border: 1px solid #c6e1f2;
            }
             /*Hide RadEditor toolbars*/
            .Default .reToolbarWrapper
            {
                display: none;
            }
        </style>
     
    </head>
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager runat="server" ID="RadScriptManager1"/>
        
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="Panel1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="Panel1" LoadingPanelID="RadAjaxLoadingPanel1">
                        </telerik:AjaxUpdatedControl>
                    </UpdatedControls>
                </telerik:AjaxSetting>
                 
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <asp:FileUpload ID="fileUpload" runat="server" />
        <asp:Button ID="Button1" runat="server" Text="Click to see the loading image" OnClick="Button1_Click">
                </asp:Button>
                <asp:Label ID="lblTop" runat="server" />
        <br />
        <br />
        <fieldset class="module1">
            <asp:Panel ID="Panel1" runat="server" HorizontalAlign="Center" Height="275px" Style="padding-top: 15px;
                padding-left: 15px">
              <telerik:RadEditor ID="importLogEditor" runat="server" EditModes="Design" Enabled="true"
                        Width="410px" Height="190px">
                        <Tools>
                            <telerik:EditorToolGroup>
                            </telerik:EditorToolGroup>
                        </Tools>
                        
                        <Content>
                        </Content>
                    </telerik:RadEditor>
            </asp:Panel>
        </fieldset>
        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
        </telerik:RadAjaxLoadingPanel>
        </form>
    </body>
    </html>

    and this is my code behind file

    using System;
    using System.Data;
    using System.Configuration;
    using System.Web;
    using System.Web.Security;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.Web.UI.WebControls.WebParts;
    using System.Web.UI.HtmlControls;
    using Telerik.Web.UI;
     
    public partial class _Default : System.Web.UI.Page
    {
         
        /******* READ: What I want? *************/
         
        //When the user selects a file and clicks on the button then
        //I want to update only Panel content, not entire page.
        //How to do that?
        //Also I am unable to see Ajax loading image as appeared in the below link
     
        /*******************************************/
     
        protected void Button1_Click(object sender, EventArgs e)
        {
           //This lable is outside update panel. It should not update
            lblTop.Text = DateTime.Now.Ticks.ToString();
     
            //when button is clicked I want to update only this part
            System.Threading.Thread.Sleep(2000);
            importLogEditor.Content = fileUpload.FileName;
            importLogEditor.Content += "</br>" + DateTime.Now.Ticks.ToString();
     
        }
    }

    Thank you.

  2. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 05 Nov 2012 Link to this post

    Hello,

    In order to show the RadAjaxLoadingPanel on the mentioned button click event you should set this button to be ajax inititator. Also please note that in order to have the RadAjaxLoadingPanel properly appear on the page you should set Skin property for it.
     Please modify your code like follows and verify if this helps:
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="Button1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="Panel1" LoadingPanelID="RadAjaxLoadingPanel1">
                    </telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="Panel1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="Panel1" LoadingPanelID="RadAjaxLoadingPanel1">
                    </telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
     <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" Skin="Default" runat="server">
    </telerik:RadAjaxLoadingPanel>


    All the best,
    Maria Ilieva
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. LearnTelirik
    LearnTelirik avatar
    2 posts
    Member since:
    Sep 2012

    Posted 07 Nov 2012 Link to this post

    Hi Maria Ilieva,
     
    Thanks for the reply. I tried your example, now its showing loading sysmbol on top of panel but I am unable to read fileName.

    Please modify my code with your changes and you cant get finename. I guess this is because of fileupload postback nature (I know it wont work with ajax).

    Can you provide some sample code which work with fileupload?


    Thank you.

  5. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 07 Nov 2012 Link to this post

    Hi,

    Please note that upload files with ajax is not supported scenario. I would suggest you to review the following help topic which elaborates on this matter:
    http://www.telerik.com/help/aspnet-ajax/upload-uploading-ajax.html.

    You could also suggest using RadAsyncUpload instead. See more information here:
    http://www.telerik.com/help/aspnet-ajax/asyncupload-overview.html

    Regards,
    Maria Ilieva
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  6. mark baer
    mark baer avatar
    142 posts
    Member since:
    Sep 2009

    Posted 18 Apr 2013 Link to this post

    Maria, I am trying to put the Loading/spinning image on top of my RadAsyncUpload Control while the RadPanel is refreshing with a link to the uploaded file.  The file is getting uploaded, but the Loading/Spinning image is not appearing...I use javascript and a hidden button to initiate the upload...I tried adding the button to the AjaxManager and I tried adding the AsyncUpload to the AjaxManager.  I also tried adding the RadPane that the Upload Control is in.  The link gets refreshed with the new, uploaded file, but the spinning Image never appears.  My controls are about 1 year old since our Legal Departments are still fussing over the EULA so currently, I can't upgrade to the latest controls.

    Help?

    thanks
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017