RaDSplitter, RadAjaxManager, RadLoadingPane not showing

4 posts, 0 answers
  1. Neal
    Neal avatar
    114 posts
    Member since:
    Apr 2008

    Posted 14 Oct 2015 Link to this post

     Hi

    I have been unable to resolve this problem, even using asp:panels as suggested.

    I have a RadSplitter (v2015.3), alignment is horizontal.

    2 panes reside within it.

    One at the Top for a RadMenu.

    One beneath as a contentPane.

    Menu items when clicked, do not show the LoadingPanel.

     Thx

    Neal

    My Markup is :

    <body style="border:none; background-color:Black"
        <form id="form1" runat="server">
         
            <telerik:RadScriptManager ID="Scriptmanager1" runat="server"
                AsyncPostBackTimeout="36000"
                EnableTheming="True">
            </telerik:RadScriptManager>
      
            <telerik:RadCodeBlock ID="xx" runat="server">
            <script language="javascript"  type="text/javascript">
     
                window.onresize = window.onload = pageLoad;
                function pageLoad() {
                    var menu = $find("<%= RadMenu1.ClientID %>");
                    var width = menu.get_element().offsetWidth;
                    var singleItemLength = Math.floor(width / menu.get_items().get_count()) - 2 + "px";
     
                    for (var i = 0; i < menu.get_items().get_count() ; i++) {
                        var li = menu.get_items().getItem(i).get_element();
                        li.style.width = singleItemLength;
                    }
                }
     
                function OpenLogin()
                {
                    var urlExtn "ms=" + new Date().getTime();
                    var oWnd = radopen("LoginPg.aspx?" + urlExtn, "Login");
                    oWnd.setSize(500, 233);
                    oWnd.Center;
                }
                 
                function MenuItemItemClicked(sender, args)
                {
                    var itemValue = args.get_item().get_value();
                     
                    if (itemValue == "11")
                    {
                        ShowRadWinRegister();
                    }
                    if (itemValue == "12")
                    {
                        OpenLogin();
                    }
                }
                 
                function ShowRadWinRegister()
                {
                    var urlExtn "ms=" + new Date().getTime();
                    var oWnd = radopen("Forms/ClientForms/Registration.aspx?" + urlExtn , "Register" );
                    oWnd.moveTo( 20, 40 );
                }
     
                function RefreshParentPage()
                {
                  $find("<%= RadAjaxManager1.ClientID %>").ajaxRequest("Rebind"); 
                }
                 
               function OnClientShow(sender, eventArgs)
               {
                    RadWindow.Center;
               }
                
               function ShowLoading()
               {
                    $find("<%= RadAjaxManager1.ClientID %>").ajaxRequest("InitialPageLoad");
               }
     
     
           </script>
            </telerik:RadCodeBlock>
             
         
            <telerik:RadWindowManager
                ID= "RadWindowManager1"
                runat= "server"
                Overlay="true"
                Modal="true"  >
                <Windows>
                    <telerik:RadWindow
                        runat="server"
                        ID="Login"
                        Width="500px"
                        Height="233px"
                        Behaviors="None"
                        VisibleStatusbar="False"
                        VisibleTitlebar="False" 
                        OnClientClose="RefreshParentPage"
                        >
                   </telerik:RadWindow>
                    
                   <telerik:RadWindow
                        ID="Register"
                        runat="server"
                        Width="1020px"
                        Height="535px"
                        Top="40px"
                        Left="20px"
                        VisibleStatusbar="False"
                        style="display:none;"
                        Behaviors="Default"
                        InitialBehaviors="None"
                        OnClientShow="OnClientShow"
                        >
                   </telerik:RadWindow>
                </Windows
            </telerik:RadWindowManager>
     
         
            <div id="oBox" class="oBox" >
                 <!-- Div Top Center Text 50px height-->
                 <div  id="DivTopText"
                       align="center"
                       class="DivTopText"  >
     
                       <div class="DivTopText" style="text-align:right">
                           <asp:Label ID="lblLoggedUser" runat="server" Text="" Visible="true"
                                    width="360px" ForeColor="Black" Font-Size="Small"></asp:Label>
                      </div>
                 </div>
            </div>    
             
            <div id="MenuDiv" align="center" class="MenuDiv"
                             style="position:absolute;top:47px;border:none 0 transparent; width:100%">
                
                 <telerik:radsplitter id="RadSplitter1" runat="server" 
                        Height ="930px"  width="100%" 
                        liveresize="true" 
                        orientation="Horizontal"
                        ResizeWithParentPane="true"
                        ResizeMode="proportional"
                        BorderStyle="None" 
                        style="position:absolute;top:0px; left:0px; border:none 0 transparent " >
                 
                    <telerik:radpane id="NavPane"  
                                     runat="server" Height="30px"  scrolling="None"   BackColor="Black"
                                     style="position:absolute;top:0px;border:none 0 transparent; left: 0px; width: 100%;" >
                        <asp:Panel ID ="aspMenuPanel" runat="server">
                            <telerik:RadMenu ID="RadMenu1"
                                    style="position:absolute;top:0px;border:none 0 transparent "
                                    Height="32px"
                                    runat="server" Width="100%"                     
                                    skin="Black"
                                    OnClientItemClicked="MenuItemItemClicked"
                                    DataFieldID="ScreenId"
                                    DataFieldParentID="ParentScreenId"
                                    DataNavigateUrlField="Screen"
                                    DataTextField="Title"
                                     
                                    DataValueField="ScreenId"
                                    OnItemDataBound="RadMenu1_OnItemDataBound" BorderStyle="None" CausesValidation="False" >
                            </telerik:RadMenu>                        
                       </asp:Panel>
                    </telerik:radpane
                        
                    <telerik:radpane id="RadPane2" runat="server" 
                          height="100%"  BorderStyle="none"
                          width="100%"
                          scrolling="None" style="position:absolute; top:62px; left:0px"  
                        <asp:Panel ID="aspOuterContentPanel" runat="server" ></asp:Panel>
                         <telerik:radsplitter id="RadSplitter2" runat="server"
                            orientation="Horizontal" BorderStyle="none" BorderWidth="0px"
                            EnableEmbeddedSkins="false"
                            Height="100%" width="100%">
                                 <telerik:radpane id="ContentPane" BackColor="Black"
                                        runat="server" style="position:absolute; top:65px; left:0px; "
                                        Width="100%" Height="100%" BorderStyle="none"
                                        ContentUrl="LandingPage.aspx" 
                                       Scrolling="None">
                                      <asp:Panel ID="aspContentPanel2" runat="server" ></asp:Panel>
                                </telerik:radpane>
                         </telerik:radsplitter>
                   </telerik:radpane>
     
                 </telerik:radsplitter>
            
                 <telerik:RadAjaxManager ID="RadAjaxManager1"  OnAjaxRequest="RadAjaxManager1_AjaxRequest"
                runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1" >
                <ajaxsettings>
                     
                    <telerik:AjaxSetting AjaxControlID="RadMenu1" >
                        <UpdatedControls>
                           <telerik:AjaxUpdatedControl ControlID="xx"   />
                             <telerik:AjaxUpdatedControl ControlID="RadWindowManager1"  />
                            <telerik:AjaxUpdatedControl ControlID="aspOuterContentPanel"  />
                            <telerik:AjaxUpdatedControl ControlID="RadSplitter1"  />
                             <telerik:AjaxUpdatedControl ControlID="RadSplitter2"  />
                            <telerik:AjaxUpdatedControl ControlID="RadMenu1"  />
                             <telerik:AjaxUpdatedControl ControlID="RadAjaxManager1"  />
                             <telerik:AjaxUpdatedControl ControlID="aspContentPanel2"  />
                        </UpdatedControls>
                    </telerik:AjaxSetting>
     
                    <telerik:AjaxSetting AjaxControlID="RadAjaxManager1" >
                        <UpdatedControls>
                           <telerik:AjaxUpdatedControl ControlID="xx"  />
                             <telerik:AjaxUpdatedControl ControlID="RadWindowManager1"  />
                            <telerik:AjaxUpdatedControl ControlID="RadMenu1"  />
                              <telerik:AjaxUpdatedControl ControlID="RadAjaxManager1"  />
                            <telerik:AjaxUpdatedControl ControlID="aspContentPanel2" />
                             
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                    
                     
                     
                </ajaxsettings>
            </telerik:RadAjaxManager>
     
                 <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
                     <asp:Image ID="Image1" ImageUrl="~/Images/loading5.gif"
                        BorderWidth="0px" AlternateText="Loading" runat="server" Style="margin-top: 145px;z-index:999999">
                    </asp:Image>
               </telerik:RadAjaxLoadingPanel>                 
            </div>
        </form>
    </body>

  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 16 Oct 2015 Link to this post

    Hi Neal,

    If you want the RadWindows to show a loading indicator, you should set their ShowContentDuringLoad property to false: http://demos.telerik.com/aspnet-ajax/window/examples/showcontentduringload/defaultcs.aspx.

    Individual RadPane instances also offer the ShowContentDuringLoad property so if you change their ContentUrl (either via server code or via JS), they can show a loading indicator by themselves.

    Otherwise, if the menu navigates the entire page to a new URL, showing a loading indicator is not possible with our controls, because the browser disposes the page and our controls with it.

    Regards,

    Marin Bratanov
    Telerik
    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 Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Neal
    Neal avatar
    114 posts
    Member since:
    Apr 2008

    Posted 19 Oct 2015 in reply to Marin Bratanov Link to this post

    Hi Marin

    I tried both of the first 2 options above. The first works if it is indeed a RadWindow.

    However..

    My RadMenu inside a S​plitter in the NavPane causes different aspx files to load in the 2nd Pane of my Splitter, (being the content pane.)

    It is here that I am unable to get the loading panel to display.

    I have tried putting asp panels inside these panes as suggested in other similar threads but no success.

    Thx

    Neal

  5. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 19 Oct 2015 Link to this post

    Hello Neal,

    Can you confirm the RadPane whose ContentUrl you set has its ShowContentDuringLoad property set to false?

    I just tried the following and it works for me:

    <script>
        function setUrl() {
            $find("<%=RadPane2.ClientID%>").set_contentUrl("some-page.aspx");
        }
    </script>
    <telerik:RadSplitter ID="RadSplitter1" runat="server">
        <telerik:RadPane ID="RadPane1" runat="server">
            <asp:Button ID="Button1" Text="set new url" OnClientClick="setUrl(); return false;" runat="server" />
        </telerik:RadPane>
        <telerik:RadPane ID="RadPane2" runat="server" ShowContentDuringLoad="false">
            <asp:Label ID="Label1" Text="some initial content" runat="server"  />
        </telerik:RadPane>
    </telerik:RadSplitter>

    In your case, RadPane2 corresponds to your RadPane2 if I understand correctly.

    I also advise against setting a pane's dimensions to 100% because this would cause a conflict since it should not leave room for other adjacent panes.

    If comparing your setup with this does not help you resolve the problem, I advise that you open a support ticket and send us a small runnable version of your page that showcases the problem so we can examine it.

    Regards,

    Marin Bratanov
    Telerik
    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 Feedback Portal and vote to affect the priority of the items
Back to Top