RadAjax problem with Web User Control

3 posts, 1 answers
  1. Sunil
    Sunil avatar
    29 posts
    Member since:
    Jul 2010

    Posted 17 Aug 2010 Link to this post

    Hi,

    I have a .aspx page with web user controls loaded dynamically into a panel called Main_PH. Everything works as it should. However, when I try to introduct RadAjaxManager with loading panels things don't go so great.

    Below is my code for the default.aspx page

    <telerik:RadCodeBlock ID="Default_RadCodeBlock" runat="server">
      
              
            <script type="text/javascript">
                function RequestStart(sender, eventArgs) {
                    var loadingImage = document.getElementById('<%= Default_RadAjaxLoadingPanel.FindControl("Image1").ClientID %>');
                    var panel1 = $get("WUC_default_wuc_Panel_Loading");
                    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>
          
          
          
    </head>
    <body id="home">
    <form id="Default_Master_Form" runat="server">
      
        <telerik:RadScriptManager ID="Default_ScriptManager" runat="server" />
      
        <telerik:RadAjaxManager ID="Default_RadAjaxManager" runat="server" 
            DefaultLoadingPanelID="Default_RadAjaxLoadingPanel">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="LinkButton_MM_Inbox">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="Panel_Loading"  
                            LoadingPanelID="Default_RadAjaxLoadingPanel">
                        </telerik:AjaxUpdatedControl>
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
            <ClientEvents OnRequestStart="RequestStart" />
        </telerik:RadAjaxManager>
      
        <telerik:RadAjaxLoadingPanel ID="Default_RadAjaxLoadingPanel" runat="server" Transparency="30" Skin="Default">
             <div class="loading">  
                            <asp:Image ID="Image1" runat="server" ImageUrl="~/Images/loading2.gif" />  
                        </div
        </telerik:RadAjaxLoadingPanel>
      
    ......
      
      <asp:PlaceHolder ID="Main_PH" runat="server">
                </asp:PlaceHolder>

    Here is the code for the pre-render in code behind of default.aspx

    protected void Page_PreRender(object sender, EventArgs e)
            {
                Default_RadAjaxLoadingPanel.OnClientShowing = "MyClientShowing";
                Default_RadAjaxLoadingPanel.OnClientHiding = "MyClientHiding";
            }


    Here is the code for the .ascx page which is loaded into Main_PH

    <asp:Panel ID="Panel_Loading" runat="server" CssClass="loading_panel" Height="440px">
      
                        <h2>
                            Administration</h2>
                        <div class="content_main">
      
                                <h3>
                                    1. Employee Settings - Personal</h3>
                                <div>
                                    <label for="empid_ti">
                                        Employee Id 
                                        <asp:Button ID="Button1" runat="server" Text="Button" CausesValidation="false"/></label>
                                    <asp:TextBox ID="TextBox1" runat="server" EnableViewState="true"></asp:TextBox></div>
      
    </asp: Panel>


    When I click on the button LinkButton_MM_Inbox from the default.aspx page, what happens is the animation starts, finishes etc on the Panel_Loading from the .ascx and an Ajax postback happens but a new Web User Control.ascx does not appear on the page (which is what is supposed to happen).

    If I change the code in the default.aspx page to this: (Main_PH instead of Panel_Loading...

    <telerik:AjaxSetting AjaxControlID="LinkButton_MM_Inbox">
                   <UpdatedControls>
                       <telerik:AjaxUpdatedControl ControlID="Main_PH"  
                           LoadingPanelID="Default_RadAjaxLoadingPanel">
                       </telerik:AjaxUpdatedControl>
                   </UpdatedControls>
               </telerik:AjaxSetting>

    ... the Ajax postback happens, the new web user control is added as should happen but I don't get the animation in Panel_Loading.

    I'm not really sure what to do?? I can't add the animations to Main_PH because Main_PH is heavily styled from the user controls and the animation will not show.

    Any suggestions would be great! Thanks!

    Sunny
  2. Answer
    Veli
    Admin
    Veli avatar
    2002 posts

    Posted 20 Aug 2010 Link to this post

    Hello Sunil,

    With your RadAjaxManager in the content page, your updated panel should be in the content page too. You can have a panel around your user control place holder and AJAX-ify that:

    <telerik:RadAjaxManager ID="Default_RadAjaxManager" runat="server"
        DefaultLoadingPanelID="Default_RadAjaxLoadingPanel">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="LinkButton_MM_Inbox">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="PanelWrapper" 
                        LoadingPanelID="Default_RadAjaxLoadingPanel">
                    </telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
        <ClientEvents OnRequestStart="RequestStart" />
    </telerik:RadAjaxManager>
     
    <telerik:RadAjaxLoadingPanel ID="Default_RadAjaxLoadingPanel" runat="server" Transparency="30" Skin="Default">
         <div class="loading"
                        <asp:Image ID="Image1" runat="server" ImageUrl="~/Images/loading2.gif" /> 
                    </div>
    </telerik:RadAjaxLoadingPanel>
     
    ......
     
    <asp:Panel Id="PanelWrapper" runat="server">
        <asp:PlaceHolder ID="Main_PH" runat="server">
        </asp:PlaceHolder>
    </asp:Panel>


    Veli
    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
  3. Sunil
    Sunil avatar
    29 posts
    Member since:
    Jul 2010

    Posted 24 Aug 2010 Link to this post

    This worked, thank you :)
Back to Top