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

Multiple loading panel on page

8 Answers 534 Views

Ajax

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

Ira asked on 11 Mar 2011, 08:38 AM

telerik-multiple-loading-image.png

Hello.

We were using telerik controls (2009 Q2). After upgrading to 2010 Q3, the loading panel image has started coming twice.
Previously, we had transparency set to 5, but after upgrade, image was not showing. So then we changed the transparency to 0 then image started showing up.

But in some pages, there are 2 images showing up (please see the image attached). The loading panel is used as following:

<telerik:RadAjaxLoadingPanel ID="LoadingPanel1" runat="server" BackgroundPosition="Top"

Transparency="0" HorizontalAlign="Center" >

<img src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading.gif") %>'

alt="<%= GetWebString("Loading...")%>" style="border: 0;" />

</telerik:RadAjaxLoadingPanel>

The same code is working fine in some pages, but in some other pages, it is showing 2 images. I want my own image.
Any help is appreciated..

8 Answers, 1 is accepted

answered on 25 Mar 2011, 07:25 AM

Loadingpanelimage.png

Hi Pavlina,

Sorry for very very late reply..
Here I am sending the code of problematic page. I've removed most of part from the page that we are using for our application but still loading panel images are coming twice..

LoadingPanel.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="LoadingPanel.aspx.cs" Inherits="WebApplication1.LoadingPanel" %>

<%@ 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 runat="server">

<title></title>

</head>

<body style="background-color:Silver;">

<form id="form1" runat="server">

<center>

<div>

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">

</telerik:RadScriptManager>

Click the button to fill the grid...

<asp:Button ID="btn" runat="server" Text="click" onclick="btn_Click"/>

<telerik:RadGrid ID="grd" runat="server" AutoGenerateColumns="true" PageSize="5" AllowPaging="true"

BackColor="#000033" ForeColor="#FFFFFF"

OnPageIndexChanged="red_OnPageIndexChanged">

</telerik:RadGrid>

<telerik:RadAjaxManager runat="server" DefaultLoadingPanelID="" ID="RadAjaxManager1">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="btn">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="grd" LoadingPanelID="LoadingPanel1"/>

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadAjaxLoadingPanel ID="LoadingPanel1" runat="server" BackgroundPosition="Center"

Transparency="0" HorizontalAlign="Center" >

<asp:Image ID="imgLoading" runat="server" ImageUrl ="~/hourglass.gif"

AlternateText ="Loading" style="border: 0;" />

</telerik:RadAjaxLoadingPanel>

</div>

</center>

</form>

</body>

</html>

LoadingPanel.aspx.cs

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Data.SqlClient;

using System.Data;

using

Telerik.Web.UI;

namespace WebApplication1

{

public partial class LoadingPanel : System.Web.UI.Page

{

String connectionString = "User ID=sa;Initial Catalog=LocalTest;Data Source=mymachine;Password=abc";

protected void Page_Load(object sender, EventArgs e)

{

if (!Page.IsPostBack)

{

FillGrid();

}

protected void btn_Click(object sender, EventArgs e)

{

FillGrid();

}

private void FillGrid()

{

SqlConnection cn = new SqlConnection(connectionString);

String query = "SELECT * FROM tb_test";

SqlCommand cmd = new SqlCommand(query, cn);

DataSet ds = new DataSet();

SqlDataAdapter adp = new SqlDataAdapter(cmd);

adp.Fill(ds);

this.grd.DataSource = ds;

this.grd.DataBind();

}

protected void red_OnPageIndexChanged(object source, GridPageChangedEventArgs e)

{

FillGrid();

}

web.config

<?xml version="1.0"?>

<configuration>

<!-- By creating a custom file for application settings and specifying it here, you can have a

non-version-controlled appSettings *.config file for your development and testing purposes,

and the application web.config file can then be version controlled.

The only constraint is that your custom file follow the naming convention specified in the

'file' attribute below. If the runtime cannot find the specified file, it will simply ignore it.

For more information, see:

http://msdn.microsoft.com/library/default.asp?url=/library/en-us/cpgenref/html/gngrfAppSettingsElement.asp

-->

<appSettings>

<add key="Telerik.Skin" value="Vista" />

</appSettings>

<system.transactions>

<!--

a value of blank in the distributedTransactionManagerName takes the

local DTC server, we could also have a remote DTC server to perform

our transaction if required by specifying the remote DTC server name

here

-->

<defaultSettings distributedTransactionManagerName="" timeout="00:10:00"/>

</system.transactions>

<system.web>

<pages enableViewState="true" enableViewStateMac="false" validateRequest="false" controlRenderingCompatibilityVersion="3.5" clientIDMode="AutoID">

</pages>

<!-- DYNAMIC DEBUG COMPILATION Set compilation debug="true" to enable ASPX

debugging. Otherwise, setting this value to false will improve runtime

performance of this application. -->

<compilation defaultLanguage="c#" debug="true" batch="false" targetFramework="4.0" />

<!-- CUSTOM ERROR MESSAGES Set customErrors mode="On" or "RemoteOnly" to enable

custom error messages, "Off" to disable. Add

<error>

tags for each of the errors you want to handle. -->

<customErrors mode="RemoteOnly" defaultRedirect="inactive.aspx"/>

<!-- APPLICATION-LEVEL TRACE LOGGING Application-level tracing enables trace

log output for every page within an application. Set trace enabled="true" to

enable application trace logging. If pageOutput="true", the trace information

will be displayed at the bottom of each page. Otherwise, you can view the

application trace log by browsing the "trace.axd" page from your web

application root. -->

<trace enabled="false" requestLimit="10" pageOutput="false" traceMode="SortByTime" localOnly="true"/>

<httpRuntime maxRequestLength="102400" executionTimeout="360000" requestValidationMode="2.0" />

<!-- SESSION STATE SETTINGS By default ASP.NET uses cookies to identify which

requests belong to a particular session. If cookies are not available, a

session can be tracked by adding a session identifier to the URL. To disable

cookies, set sessionState cookieless="true". -->

<sessionState mode="InProc" cookieless="false" timeout="40" sqlConnectionString="data source=epdm;user id=sa; password=;" stateConnectionString="tcpip=127.0.0.1:42424"/>

<!-- PREVENT SOURCE CODE DOWNLOAD This section sets the types of files that

will not be downloaded. As well as entering a httphandler for a file type, you

must also associate that file type with the xspisapi.dll in the App Mappings

property of the web site, or the file can be downloaded. It is recommended that

you use this section to prevent your sources being downloaded. -->

<globalization requestEncoding="utf-8" responseEncoding="utf-8"/>

<httpHandlers>

<add path="ChartImage.axd" type="Telerik.Web.UI.ChartHttpHandler" verb="*" validate="false" />

<add path="Telerik.Web.UI.SpellCheckHandler.axd" type="Telerik.Web.UI.SpellCheckHandler" verb="*" validate="false" />

<add path="Telerik.Web.UI.DialogHandler.aspx" type="Telerik.Web.UI.DialogHandler" verb="*" validate="false" />

<add path="Telerik.RadUploadProgressHandler.ashx" type="Telerik.Web.UI.RadUploadProgressHandler" verb="*" validate="false" />

<add path="Telerik.Web.UI.WebResource.axd" type="Telerik.Web.UI.WebResource" verb="*" validate="false" />

</httpHandlers>

<httpModules>

<add name="RadUploadModule" type="Telerik.Web.UI.RadUploadHttpModule" />

<add name="RadCompression" type="Telerik.Web.UI.RadCompression" />

</httpModules>

</system.web>

</configuration>

Waiting for reply..!!

Accepted

answered on 25 Mar 2011, 04:28 PM

loading-panel.zip

Hi Ira,

The problem you are facing is caused by the following line in your web confing :

<add key="Telerik.Skin" value="Vista" />

To resolve it you can set Skin = "" for the RadAjaxLoadingPanel and only imgLoading will appear on ajax request:
ASPX:

<telerik:RadAjaxLoadingPanel ID="LoadingPanel1" runat="server" BackgroundPosition="Center"

Transparency="0" HorizontalAlign="Center" Skin="">

<asp:Image ID="imgLoading" runat="server" ImageUrl="~/hourglass.gif" AlternateText="Loading"

Style="border: 0;" />

</telerik:RadAjaxLoadingPanel>

I hope this helps.

All the best,
Pavlina
the Telerik team

Vote for the 7 Telerik products at the 2011 Great Indian Developer Awards!