This is a migrated thread and some comments may be shown as answers.
Loading Panel not displaying
13 Answers 230 Views
This is a migrated thread and some comments may be shown as answers.
John
Top achievements
Rank 1
John asked on 15 Sep 2008, 04:38 PM
Hi,

I have a question regarding the Ajax loading panel.

I have a page, showing thumbnails of an image; when these are clicked on the larger version is shown in a main image above.

I ajaxified this with Rad Ajax Manager, no problem. But if I add a Loading Panel, it's not shown. If however I ditch the Ajax Manager and wrap a Ajax Panel round the controls in question, the Loading Panel displays correctly; but in this case the thumbnails reload on Ajax postback too, which I don't want.

Can you tell me how to get this working with the AjaxManager? Here is my code snippet below:

<asp:Content ID="Content2" ContentPlaceHolderID="maincontent" Runat="Server">  
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>  
<rad:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="LoadingPanel1">  
    <AjaxSettings>  
        <rad:AjaxSetting AjaxControlID="repThumbnails">  
            <UpdatedControls>  
                <rad:AjaxUpdatedControl ControlID="imgPhoto" LoadingPanelID="LoadingPanel1" />  
            </UpdatedControls>  
        </rad:AjaxSetting>  
    </AjaxSettings>  
</rad:RadAjaxManager>  
<rad:RadAjaxLoadingPanel ID="LoadingPanel1" runat="server" MinDisplayTime="1000" Style="width: 570px;">  
    <img src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading6.gif") %>' alt="Loading..." title="Loading..." style="border: 0; padding-top: 180px;" />  
</rad:RadAjaxLoadingPanel>  
<h1>Photos</h1>  
<div id="photocontainer"><asp:Image ID="imgPhoto" runat="server" AlternateText="The Boathouse" ToolTip="The Boathouse" /></div>  
<asp:Repeater ID="repThumbnails" runat="server" OnItemDataBound="repThumbnails_ItemDataBound" OnItemCommand="repThumbnails_ItemCommand">  
    <HeaderTemplate><div id="thumbnailcontainer"></HeaderTemplate>  
    <ItemTemplate>  
            <div class="thumbnail"><asp:ImageButton ID="lnkThumb" runat="server" ToolTip="Enlarge" AlternateText="Enlarge" CommandName="ThumbnailClick" /></div>  
            <br id="rowBreak" runat="server" visible="false" class="clear" />  
    </ItemTemplate>  
    <FooterTemplate></div></FooterTemplate>  
</asp:Repeater>  
</asp:Content> 

Thanks, Matt

13 Answers, 1 is accepted

Sort by
0
Maria Ilieva
Telerik team
answered on 16 Sep 2008, 12:03 PM
Hello MattWorrall,

Will it be convenient for you to open a regular support ticket and send us sample runnable project, which replicates the issue? We will test the application locally and advise you further.

Kind regards,
Maria Ilieva
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
loai taha
Top achievements
Rank 1
answered on 22 Dec 2009, 11:57 AM
Dear Maria,

I'm facing the same problem, therfore I would really appreciate posting the solution in here in order to use.

I'm testing Telerik ASP,NET AJAX, yet didn't buy the new 2009 Q3 suit.

Regards,
0
Pavlina
Telerik team
answered on 22 Dec 2009, 01:10 PM
Hi Loai,

Could you please elaborate a bit more on your scenario? It will be best if you send us a simple working application with reproduced this erroneous behavior or at least to share your problematic page code. Thus we could do our best to help you further in resolving it.

Looking forward for your reply.

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.
0
loai taha
Top achievements
Rank 1
answered on 22 Dec 2009, 02:10 PM

Dear Pavlina,

What I’m trying to do is to retrieve and display specific database records after 5 seconds from the overall page load. Therefore I used a repeater, AJAX Manager, and AJAX Load Panel to accomplish that scenario as per the below, 

1.       Page loads and initiate the JavaScript timer function

2.       Timer function triggers after 5 seconds and calls AJAXReq function

3.       AJAXReq function sends a request behind the scene to the server to update the pre-configured AJAX Manager components (controls to be updated by AJAX request)

4.       Server receives the request, gets the needed records and populate a SQL reader that becomes lately the repeater data source

5.       The repeater is refreshed and displays results as listed points

The problem in the above scenario is that I can’t see the AJAX Load Panel at all, however if you change the repeater to a label, then the AJAX Load Panel will show.

 

Below is the page HTML/JavaScript code

 

 

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="AjaxBoxes.aspx.vb" Inherits="AjaxBoxes" %> 
 
<!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 onload="initTimer();">  
    <form id="form1" runat="server">  
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">  
    </telerik:RadScriptManager> 
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"   
        RequestQueueSize="5" UpdatePanelsRenderMode="Inline">  
        <AjaxSettings> 
            <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">  
                <UpdatedControls> 
                    <telerik:AjaxUpdatedControl ControlID="Repeater1"   
                        LoadingPanelID="RadAjaxLoadingPanel1" />   
                </UpdatedControls> 
            </telerik:AjaxSetting> 
        </AjaxSettings> 
    </telerik:RadAjaxManager> 
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" Runat="server"   
        Skin="Office2007" BackColor="White">  
    </telerik:RadAjaxLoadingPanel>      
    <div style=" background-color:#eeeeee;width:400px; height:200px;">  
        <br /> 
        <ul> 
        <asp:Repeater ID="Repeater1" runat="server">  
        <ItemTemplate> 
        <li>    
            <%#Container.DataItem("Name")%>    
        </li>          
        </ItemTemplate> 
        </asp:Repeater> 
        </ul> 
    </div> 
      
      
     <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">  
    <script language="javascript" type="text/javascript">  
    var id;  
        function initTimer() {  
             idsetTimeout('AJAXReq()', 5000);  
        }           
          
        function AJAXReq(){  
            var ajaxManager = <%=RadAjaxManager1.ClientID %>;  
            ajaxManager.ajaxRequest();  
            clearTimeout(id);  
        }  
          
    </script> 
    </telerik:RadCodeBlock> 
      
    </form> 
</body> 
</html> 
 

Below is the Code behind code

 

 

Imports System.Data.SqlClient  
 
Partial Class AjaxBoxes  
    Inherits System.Web.UI.Page  
    Protected Sub RadAjaxManager1_AjaxRequest(ByVal sender As ObjectByVal e As Telerik.Web.UI.AjaxRequestEventArgs) Handles RadAjaxManager1.AjaxRequest  
 
        Threading.Thread.Sleep(2000)  
 
        Dim x As New Database  
        Dim s1 As SqlDataReader = x.ExecuteReader("Select Query")  
        Me.Repeater1.DataSource = s1  
        Me.Repeater1.DataBind()  
        s1.Close()  
 
    End Sub 
End Class 

 

Thanks for your help and support.

Regards,

0
loai taha
Top achievements
Rank 1
answered on 23 Dec 2009, 09:07 AM
Dear Pavlina,

Seems this bug is very serious since i didn't get an answer yet.

Regards :-)
0
Pavlina
Telerik team
answered on 23 Dec 2009, 02:18 PM
Hi Loai ,

The asp:Repeater control does not render according to the requirements for ajax "aware" control, specifically it does not render in a single tag. Please nest the Repeater in asp:Panel and set it as initiator and updated control and then loading panel should display.

Best wishes,
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.
0
loai taha
Top achievements
Rank 1
answered on 23 Dec 2009, 02:34 PM
Dear Pavlina,

Thanks a bunch for your reply, however I solved that issue using AJAX Loading Panel :-)

I have two more questions Pavlina,

Q1: what is the lightest/fastest to use, AJAX Manager, or AJAX Loading Panel? I know it depends heavily on the request and response sizes, yet I'm wondering if both are used with the same size of request/response, then which is the lighter/faster

Q2: I'm using FireFox firebug to test and monitor Ajaxified pages, yet I can't find a way to get an accurate AJAX details (i.e. size of Ajax HTTP request/response), do you have any idea of a tool that can provide a good monitoring methods in order to collect needed details for further Ajaxified pages tuning!

Thanks for your support and help.

Merry Christmas :-)
0
Radoslav
Telerik team
answered on 28 Dec 2009, 04:10 PM
Hi Loai,

With Ajax Manager you could ajaxify all controls that normally work with postbacks:

http://www.telerik.com/help/aspnet-ajax/ajxajaxmanager.html

AJAX Loading Panel is a control that could be displayed when a request is performed and the page is loading silently:

http://www.telerik.com/help/aspnet-ajax/ajxloadingpanel.html

In your first question maybe you mean the difference between RadAjaxManager and RadAjaxPanel? If so here is the documentation article which explains when you should use Ajax Manager and when Ajax Panel:

http://www.telerik.com/help/aspnet-ajax/manager-vs-panel.html

As for your second question you could try using Fiddler or Charles for ajax monitoring. They are HTTP monitors which logs all HTTP(S) traffic between your computer and the Internet.

I hope this helps.

Kind regards,
Radoslav
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.
0
Mark Galbreath
Top achievements
Rank 2
answered on 28 Dec 2009, 07:44 PM
I use Fiddler; it's da bomb!

http://www.fiddler2.com/fiddler2/

Cheers!
0
loai taha
Top achievements
Rank 1
answered on 28 Dec 2009, 08:19 PM
Thanks Radoslav, really appreciates your high quality support

Happy new year :-)
0
Pam Redrum
Top achievements
Rank 1
answered on 30 Dec 2009, 05:41 AM
I have got the same problem as MattWorral.
I have used some customcontrol and try to ajax loading them, but the loading panel do not displayed.
I tried to add asp:panel to the customcontrols but seems no use.

How can I found which control is "wrong", so I can rewrite or surround with a Panel?
Or there is a easy way to make the loading panel displayed(It can be in the whole page)?
0
Dimo
Telerik team
answered on 30 Dec 2009, 08:09 AM
Hi Pam,

RadAjaxLoadingPanel searches for an HTML element, which has an ID equal to the client ID of the updated control. Do you have such an element? For example user controls do not render such a wrapper element. Maybe your custom control does not render it either.

If you need further assistance, please provide a simple runnable demo.

Regards,
Dimo
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.
0
Pam Redrum
Top achievements
Rank 1
answered on 30 Dec 2009, 09:34 AM
ok, I see. I'll try add some panel outline the custom control.
Tags
Ajax
Asked by
John
Top achievements
Rank 1
Answers by
Maria Ilieva
Telerik team
loai taha
Top achievements
Rank 1
Pavlina
Telerik team
Radoslav
Telerik team
Mark Galbreath
Top achievements
Rank 2
Pam Redrum
Top achievements
Rank 1
Dimo
Telerik team
Share this question
or