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

Loading Panel not displaying

13 Answers 370 Views

Ajax

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

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

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() {  
        
                         id= setTimeout('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 Object, ByVal 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,

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 :-)

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.

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

Loading Panel not displaying

13 Answers, 1 is accepted