Ajax Loading Panel doesn't show

2 posts, 0 answers
  1. Denise Duggan
    Denise Duggan avatar
    16 posts
    Member since:
    Oct 2009

    Posted 27 Feb 2010 Link to this post

    Hi all,

    I've been looking at the examples and my code all morning and cannot see what I'm doing wrong.  I hope you can help. 

    I have a page that has 2 comboboxes on it right now.  Of course it'll have more later :-)  But basically when the user selects an entry from the first combobox, the 2nd one loads it's items based on what the user selected in the first.  That part's working fine.  But I've been trying to get a "loading...." graphic to show up with the 2nd combobox while it's reloading and I just cannot get it to show up.  The combobox still loads, but but no graphic. 

    Does anyone see what I'm missing, please?  I'm including the markup here.  The only thing in the codebehind is a call to a stored procedure that loads the items in the 2nd combobox after a selection is made in the first. 

    Thanks in advance for the help.

    <%@ Page Language="VB" AutoEventWireup="false" CodeFile="LinkReqsToActs.aspx.vb" Inherits="ScoutingWithTheMouse.WebPages.Admin.Admin_LinkReqsToActs" %> 
    <%@ Register TagPrefix="swm" TagName="OrgCombobox" Src="~/Components/OrganizationDropdown.ascx" %> 
    <%@ Register TagPrefix="swm" TagName="LevelCombobox" Src="~/Components/LevelDropdown.ascx" %> 
    <%@ Register TagPrefix="swm" TagName="ReqCombobox" Src="~/Components/RequirementsDropdown.ascx" %> 
     
     
    <!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>Scouting with the Mouse - Admin - Link Requirements to Activities</title> 
         
            <!-- custom head section --> 
        <style type="text/css"
            .module1 
            { 
                background-color: #dff3ff; 
                border: 1px solid #c6e1f2; 
            } 
            .loading 
            { 
                background-color: #fff; 
                height:100%; 
                width:100%; 
            } 
        </style> 
        <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server"
        <script type="text/javascript"
            function RequestStart(sender, eventArgs) { 
                var loadingImage = document.getElementById('<%= upProgLevel.FindControl("Image1").ClientID %>'); 
                var panel1 = $get("<%= updtLevel.ClientID %>"); 
                loadingImage.style.position = "relative"
                loadingImage.style.top = (parseInt(panel1.style.height) / 2) + "px"; 
            } 
            function MyClientShowing(sender, args) { 
                args.get_loadingElement().style.border = "2px solid red"
                args.set_cancelNativeDisplay(true); 
                $telerik.$(args.get_loadingElement()).show("slow"); 
            } 
     
            function MyClientHiding(sender, args) { 
                args.get_loadingElement().style.border = "2px solid blue"
                args.set_cancelNativeDisplay(true); 
                $telerik.$(args.get_loadingElement()).hide("slow"); 
            } 
        </script> 
        </telerik:RadCodeBlock> 
        <!-- end of custom head section --> 
         
         
         
    </head> 
    <body> 
        <form id="form1" runat="server"
        <telerik:RadScriptManager ID="rsmPage" runat="server" /> 
        <telerik:RadFormDecorator ID="radFormDecorator_Page" runat="server" DecoratedControls="all"  
            Skin="Vista" /> 
         
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"
            <AjaxSettings> 
                <telerik:AjaxSetting AjaxControlID="updtLevel"
                    <UpdatedControls> 
                        <telerik:AjaxUpdatedControl ControlID="updtLevel" LoadingPanelID="upProgLevel" /> 
                    </UpdatedControls> 
                </telerik:AjaxSetting> 
                <telerik:AjaxSetting AjaxControlID="cboOrgs"
                    <UpdatedControls> 
                        <telerik:AjaxUpdatedControl ControlID="updtLevel"  LoadingPanelID="upProgLevel" /> 
                    </UpdatedControls> 
                </telerik:AjaxSetting> 
            </AjaxSettings> 
            <ClientEvents OnRequestStart="RequestStart" /> 
        </telerik:RadAjaxManager>     
         
         
        <asp:Table ID="tblPageLayout" runat="server" Width="95%"
            <asp:TableRow> 
                <asp:TableCell Width="20%"
                    <h4>Organizations</h4><swm:OrgCombobox ID="cboOrgs" runat="server" /> 
                </asp:TableCell> 
                <asp:TableCell Width="20%"
                   <telerik:RadAjaxPanel ID="updtLevel" LoadingPanelID="upProgLevel" runat="server"
                        <h4>Level</h4><swm:LevelCombobox id="cboLevels" runat="server" /> 
                    </telerik:RadAjaxPanel> 
                    <telerik:RadAjaxLoadingPanel ID="upProgLevel" runat="server" Transparency="30"
                        <div class="loading"
                            <asp:Image ID="Image1" runat="server" ImageUrl="~/Images/ajax-loader_small.gif" /> 
                        </div> 
                    </telerik:RadAjaxLoadingPanel> 
                </asp:TableCell> 
        <%--        <asp:TableCell Width="60%"
                    <h4>Rank/Badge Requirements</h4><swm:ReqCombobox ID="cboRequirements" runat="server"  width="100%"/> 
                </asp:TableCell>--%> 
            </asp:TableRow> 
        </asp:Table> 
     
     
        </form> 
    </body> 
    </html> 
     

  2. Tsvetoslav
    Admin
    Tsvetoslav avatar
    1823 posts

    Posted 01 Mar 2010 Link to this post

    Hello Denise,

    Try removing the RadAjaxPanel controls as it is equivalent to the RadAjaxManager and you should not use the latter to ajaxify controls contained in the former.

    I hope this helps. 

    All the best,
    Tsvetoslav
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
Back to Top