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

RaDSplitter, RadAjaxManager, RadLoadingPane not showing

3 Answers 117 Views

Splitter

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

Neal asked on 14 Oct 2015, 12:57 PM

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

3 Answers, 1 is accepted

answered on 16 Oct 2015, 11:26 AM

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

answered on 19 Oct 2015, 04:09 PM

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