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

AjaxLoadingPanel is not working (Provided sample working code)

4 Answers 56 Views

Ajax

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

LearnTelirik asked on 31 Oct 2012, 12:06 PM

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">

<html xmlns="http://www.w3.org/1999/xhtml">

<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 />

<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

//http://demos.telerik.com/aspnet-ajax/ajax/examples/loadingpanel/loadingimages/defaultcs.aspx

/*******************************************/

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.

4 Answers, 1 is accepted

answered on 05 Nov 2012, 09:09 AM

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.

answered on 18 Apr 2013, 06:28 PM

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

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

AjaxLoadingPanel is not working (Provided sample working code)

4 Answers, 1 is accepted