Loading Panel not displaying

14 posts, 0 answers
  1. John
    John avatar
    25 posts
    Member since:
    Mar 2007

    Posted 15 Sep 2008 Link to this post

    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
  2. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 16 Sep 2008 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. loai taha
    loai taha avatar
    44 posts
    Member since:
    Apr 2007

    Posted 22 Dec 2009 Link to this post

    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,
  5. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 22 Dec 2009 Link to this post

    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.
  6. loai taha
    loai taha avatar
    44 posts
    Member since:
    Apr 2007

    Posted 22 Dec 2009 Link to this post

    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,

  7. loai taha
    loai taha avatar
    44 posts
    Member since:
    Apr 2007

    Posted 23 Dec 2009 Link to this post

    Dear Pavlina,

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

    Regards :-)
  8. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 23 Dec 2009 Link to this post

    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.
  9. loai taha
    loai taha avatar
    44 posts
    Member since:
    Apr 2007

    Posted 23 Dec 2009 Link to this post

    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 :-)
  10. Radoslav
    Admin
    Radoslav avatar
    1564 posts

    Posted 28 Dec 2009 Link to this post

    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.
  11. Mark Galbreath
    Mark Galbreath avatar
    171 posts
    Member since:
    Jul 2009

    Posted 28 Dec 2009 Link to this post

    I use Fiddler; it's da bomb!

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

    Cheers!
  12. loai taha
    loai taha avatar
    44 posts
    Member since:
    Apr 2007

    Posted 28 Dec 2009 Link to this post

    Thanks Radoslav, really appreciates your high quality support

    Happy new year :-)
  13. Pam Redrum
    Pam Redrum avatar
    24 posts
    Member since:
    Nov 2009

    Posted 29 Dec 2009 Link to this post

    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)?
  14. Dimo
    Admin
    Dimo avatar
    8331 posts

    Posted 30 Dec 2009 Link to this post

    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.
  15. Pam Redrum
    Pam Redrum avatar
    24 posts
    Member since:
    Nov 2009

    Posted 30 Dec 2009 Link to this post

    ok, I see. I'll try add some panel outline the custom control.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017