RadSplitter + RadAjaxLoadingPanel

[Dmitry]

Hi
Loading panel does not appear over RadSplitter control.
Could you help me with this issue. Thank you

Sample code:

<telerik:RadAjaxLoadingPanel runat="server" ID="loadingPanel1">

 

 

Loading....

 

 

</telerik:RadAjaxLoadingPanel>

 

 

<telerik:RadAjaxPanel runat="server" ID="panel1" LoadingPanelID="loadingPanel1">

 

 

<asp:Button runat="server" ID="button1" Text="Post" /><br />

 

 

some text some text some text some text some text<br />

 

 

some text some text some text some text some text<br />

 

<hr />

 

 

<telerik:RadSplitter runat="server" ID="splitter1">

 

 

<telerik:RadPane runat="server" ID="pane1">

 

 

Pane1 Pane1 Pane1 Pane1 Pane1 Pane1<br />

 

Pane1 Pane1 Pane1 Pane1 Pane1 Pane1<br />

 

</telerik:RadPane>

 

 

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

 

 

<telerik:RadPane runat="server" ID="pane2">

 

Pane2 Pane2 Pane2 Pane2 Pane2 Pane2<br />

 

 

Pane2 Pane2 Pane2 Pane2 Pane2 Pane2<br />

 

 

</telerik:RadPane>

 

 

</telerik:RadSplitter>

 

 

</telerik:RadAjaxPanel>

 

 

 

 

[Tsvetie]

Hello Dmitry,
You have configured the RadAjaxLoadingPanel to show over the RadAjaxPanel and that is exactly what happens. From your question, I am not exactly sure what you expect as a result. That is why in case my assumptions are not correct, please provide detailed information on the behavior you want to achieve.

In case you would like to display the RadAjaxLoadingPanel in the center of the RadAjaxPanel - you can achieve this by means of javascript. You can use the Center LoadingPanel on the Screen help topic as a basis for the implementation.

In case you would like to display the RadAjaxLoadingPanel only over the RadSplitter control - you should either wrap only the RadSplitter in the RadAjaxPanel, or remove the LoadingPanelID property of the RadAjaxPanel and show the RadAjaxLoadingPanel with javascript - please refer to the Show and hide loading panel explicitly help topic for information how to do this.

Regards,
Tsvetie
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Dmitry]

Hi,
Thank you for your response.
I have real web page with a lot of controls that are placed inside RadAjaxPanel. And only RadSplitter does not disappear under RadAjaxLoadingPanel during post back.
In my sample I have shown that text disappear under RadAjaxLoadingPanel but RadSplitter does not.
Please see my sample below. I have added RadTextBox after RadSplitter. My text "some text..." and RadTextBox disappear under loading panel and the RadSplitter does not.
Thank you,
Dmitry

Sample code:

<telerik:RadAjaxLoadingPanel runat="server" ID="loadingPanel1">
    Loading....
</telerik:RadAjaxLoadingPanel>
<telerik:RadAjaxPanel runat="server" ID="panel1" LoadingPanelID="loadingPanel1">
    <asp:Button runat="server" ID="button1" Text="Post" /><br />
    some text some text some text some text some text<br />
    some text some text some text some text some text<br />
    <hr />
    <telerik:RadSplitter runat="server" ID="splitter1">
        <telerik:RadPane runat="server" ID="pane1">
            Pane1 Pane1 Pane1 Pane1 Pane1 Pane1<br />
            Pane1 Pane1 Pane1 Pane1 Pane1 Pane1<br />
        </telerik:RadPane>
        <telerik:RadSplitBar runat="server" ID="split1" />
        <telerik:RadPane runat="server" ID="pane2">
            Pane2 Pane2 Pane2 Pane2 Pane2 Pane2<br />
            Pane2 Pane2 Pane2 Pane2 Pane2 Pane2<br />
        </telerik:RadPane>
    </telerik:RadSplitter>
    <hr />
    <telerik:RadTextBox ID="tbText" runat="server"></telerik:RadTextBox>
</telerik:RadAjaxPanel>

[Tsvetie]

Hello Dmitry,
Thank you for the code fragment - it helped me understand and reproduce the problem. It comes from the fact that the RadSplitter Table has "visibility:visible" and that is why applying "visibility:hidden" to a parent of the splitter's does not hide it (that is how the RadAjaxLoadingPanel hides the content). In order to get the RadSplitter to hide, you can use the following approach - simply place the code bellow in the HEAD of your page:

<head runat="server">
    <title>Untitled Page</title>
    <telerik:RadCodeBlock ID="RadScriptBlock1" runat="server">
        <style type="text/css">
        #RAD_SPLITTER_<%= splitter1.ClientID %>
        {
            visibility: inherit !important;
        }
        </style>
    </telerik:RadCodeBlock>
</head>

Regards,
Tsvetie
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.