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

Style Loading Panel problem with Scroll Splitter

13 Answers 188 Views

General Discussions

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

13 Answers, 1 is accepted

answered on 08 Nov 2011, 01:35 PM

Hi Daniel,

I am not quite sure I understand the scrolling issue? Could you please provide more detailed information on the specific scenario? A screenshots or a video demonstrating the problem, along with the control's markup would be of great help solving this case.

On a side note, the above mentioned forum thread is from the RadSplitter Classic, are you using our classic controls or the Ajax suite?

All the best,
Dobromir
the Telerik team

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now

answered on 14 Nov 2011, 11:32 AM

Default2-aspx.zip

Hi Daniel,

Thank you for the provided screenshot.

The observed behavior is due to the way RadAjaxLoadingPanel is rendered on the page. The loading panel is an absolute positioned <div> that is a direct child of the <form> that is positioned over the updated control.

You can configure RadAjaxLoadingPanel to be rendered in the DOM according to the place where it is registered in the ASPX. However, such configuration will require manually sizing and positioning the loading panel. In order to achieve this you can use the following approach:

Register RadAjaxLoadingPanel inside the pane in which the updated control resides.
Set IsSticky property of the loading panel to True
Set CSS class with position:relative rule to the RadPane that contains the loading panel.
Handle OnClientShowing client-side event of RadAjaxLoading panel to size and position it over the updated control.

For your convenience I have attached a sample page demonstrating this approach.
Best wishes,
Dobromir
the Telerik team

answered on 15 Nov 2011, 01:48 PM

print-loader.gif

Hello, thank you very much for your cooperation.

The solution is correct, but I have a little problem:
When I click on the button, the RadAjaxLoadingPanel remains visible all the time.

How do I specify when the user ends the requirement and hide the RadAjaxLoadingPanel?

I am new to telerik, as always I hope your prompt cooperation
I attached a file that shows what happens.

Thank you again.

Accepted

answered on 15 Nov 2011, 02:30 PM

Default2-aspx-modified.zip

Hi Daniel,

This is the expected behavior of the page that I have attached to my previous reply. In that sample I have used the RadAjaxLoadingPanel client-side API to manually display it and leave it visible to make it easier to spot.

You can use the same loading panel with RadAjaxManager to update a control that is in the same pane as the panel. For your convenience I have attached modified version of the page where the RadAjaxLoadingPanel is used with RadAjaxManager updating ASP:Panel control.

Best wishes,
Dobromir
the Telerik team

answered on 15 Nov 2011, 02:31 PM

print-loader.gif

Hi, thanks for your cooperation.

The previously documented problem already solved.
The solution proposed by telerik team is great, but now I have a little problem of styles.

I attached a picture to understand me better.

Thank you for your support and collaboration.

answered on 18 Nov 2011, 12:26 PM

Hi Daniel,

I tried the solution that I have provided in my previous answer in various browsers but was unable to reproduce the problem. Could you please provide more detailed information on the case:

Which version of RadControls for ASP.NET AJAX are used in the application?
Under which browser and its version the problem occurs?
Could you please provide your exact implementation of the example?

Regards,
Dobromir
the Telerik team

answered on 18 Nov 2011, 01:29 PM

Hi, Thanks for your cooperation

I'm using Telerik.Web.UI. v.2011.2.915.35
I'm using Firefox 8.0

This is my code in ASPX

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="testloader.aspx.vb" Inherits="testloader" %>

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

<style type="text/css">

.relativePosition

{

position: relative;

}

.myAjaxPanel

{

position: absolute;

background-color:Aqua;

}

</style>

</head>

<body>

<form id="form1" runat="server">

<telerik:RadScriptManager ID="RadScriptManager1" runat="server" />

<telerik:RadAjaxManager runat="server">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="Button1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="pnlupdate" LoadingPanelID="RadAjaxLoadingPanel1" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadSplitter ID="RadSplitter1" runat="server" Width="100%">

<telerik:RadPane ID="RadPane1" runat="server"></telerik:RadPane>

<telerik:RadSplitBar ID="RadSplitBar1" runat="server"></telerik:RadSplitBar>

<telerik:RadPane ID="RadPane2" runat="server" CssClass="relativePosition">

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" IsSticky="true" CssClass="myAjaxPanel" Skin="Sunset" OnClientShowing="RadAjaxLoadingPanel1_OnClientShowing"></telerik:RadAjaxLoadingPanel>

<telerik:RadAjaxPanel ID="pnlupdate" runat="server">

<div style="margin-top: 100px; margin-left:100px; width: 400px; height: 400px; background:#c3c3c3;"></div>

<asp:Label runat="server" ID="lbltxt" Text="Inicio"></asp:Label>

<asp:Button ID="Button1" Text="ShowPanel" OnClick="clickbuttonsel" runat="server" />

</telerik:RadAjaxPanel>

</telerik:RadPane>

</telerik:RadSplitter>

<script type="text/javascript">

function RadAjaxLoadingPanel1_OnClientShowing(sender, args)

{

var updatedControlWrapper = args.get_updatedElement();//get reference to the updated control's wrapper element

var loadingElement = args.get_loadingElement();//get reference to the loading panel's element

//size and position the loading panel

loadingElement.style.width = updatedControlWrapper.offsetWidth + "px";

loadingElement.style.height = updatedControlWrapper.offsetHeight + "px";

loadingElement.style.top = updatedControlWrapper.offsetTop + "px";

loadingElement.style.left = updatedControlWrapper.offsetLeft + "px";

}

</script>

</form>

</body>

</html>

This is my code in .vb

Partial Class testloader

Inherits System.Web.UI.Page

Protected Sub clickbuttonsel(ByVal sender As Object, ByVal e As EventArgs)

lbltxt.Text = "hola mundo"

Threading.Thread.Sleep(3000)

End Sub

End Class

Try and help me please!
Thanks to All!!

Accepted

answered on 22 Nov 2011, 03:23 PM

Hi Daniel,

Thank you for the provided sample page.

While examining the code I noticed that you are updating RadAjaxPanel with RadAjaxManager, this is incorrect setup and it may cause unexpected side effects. Both controls have similar functionality and you should use either one or the other. RadAjaxPanel acts as a container that ajaxifys all controls placed inside it, while RadAjaxManager is used to configure direct relation between controls that trigger AJAX Requests and controls that should be updated with those requests.

Now with this said, lets get back to the specific issue. The observed issue is not caused by incorrect sizing of the loading panel but is a standard behavior of the HTML elements - RadAjaxPanel is rendered as a <div> element, and if its width is not set (or set to 100%) it is sized to 100% of the visible part of its parent container. You can observe the same behavior using the following simple HTML markup:

<div style="width: 500px; height: 300px; overflow:auto;">

<div style="width: 800px; height: 1px;">

</div>

<div style="width: 100%; height: 280px; background-color: #c3c3c3">

</div>

To avoid this behavior, I would suggest you to use RadAjaxManager to update controls separately instead of updating container control.

Greetings,
Dobromir
the Telerik team