RadAjax Loading Panel inside RadDock

[Srinivasa Rao Ranga]

Hi ,

i am having the requiremnet to show the ajax loading panel while RadDock control is loading

My code is as follows:

<telerik:RadAjaxManager ID="radAjaxManager" runat="server">
       
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="pnl" >
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="pnl" LoadingPanelID="RadAjaxLoadingPanel1" />
                   
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" InitialDelayTime="5000" Skin="Vista" runat="server">
        
    </telerik:RadAjaxLoadingPanel>

 <table cellspacing="0" cellpadding="0">
                <tr>
                    <td >
                        <telerik:RadDockZone Width="420px" runat="server" ID="RadDockZone1" Orientation="vertical" >
                       
                            <telerik:RadDock runat="server" ID="UserInfo" Title="My Portal" EnableAnimation="true">
                                <ContentTemplate>
                                 <asp:Panel ID="pnl" runat="server">
                                    <p class="innerWrp">
                                        Welcome back,<br />
                                        Mr. John Smith<br />
                                        <%= DateTime.Now.ToShortDateString() %>
                                    </p>
                                    </asp:Panel>
                                </ContentTemplate>
                            </telerik:RadDock>
</telerik:RadDockZone>
</td>
</tr>
</table>

Please help me itis very urgent requirement

[Pavlina]

Hello Srinivasa,

Review the help topic below and let me know if it helps to achieve your goal:
Show RadAjaxLoadingPanel on initial page load

Best wishes,
Pavlina
the Telerik team

[Srinivasa Rao Ranga]

hI Pavlina thanks for the reply,

as per your link i can display only one loading panel but

i am having 5 RadDock on page load on each RadDock i need to display loading panel

please suggest how to achieve

Thanks!
Srinivasa Rao

[Pavlina]

Hi Srinivasa,

Try to change your ajax settings as shown below:

<telerik:RadAjaxManager ID="radAjaxManager" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadDockZone1" >
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadDockZone1" LoadingPanelID="RadAjaxLoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>

Give this suggestion a try and let me know how it goes.

Kind regards,
Pavlina
the Telerik team

[Srinivasa Rao Ranga]

hI Pavlina thanks for the reply,

it doesnot work,i mean i am not able to see loading panels

Thanks!
Srinivas

[Pavlina]

Hi Srinivasa,

I reviewed the provided code however I was not able to find the source of the problem there. Therefore I would ask you to send us a runnable sample so we could debug the issue locally and thus try finding a proper resolution for you.

Best wishes,
Pavlina
the Telerik team

[Srinivasa Rao Ranga]

Hi,Below is my code,

My requiremnet is i need loading panel on each RadDocks

in the code below i am having 6 RadDocks,so i need  6 loading panels to load on page load

 

ww.w3.org/1999/xhtml">

 

<

 

head runat="server">

 

 

<title></title>

 

 

<style type="text/css">

 

 

td{vertical-align:top;}

 

 

 

 

.innerWrp{margin:0;padding:10px;}

 

 

.red

 

{

 

border:solid 0px white;

 

}

 

 

 

 

 

</style>

 

</

 

head>

 

<

 

body>

 

 

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

 

 

<asp:ScriptManager ID="ScriptManager1" runat="server">

 

 

</asp:ScriptManager>

 

 

<telerik:RadAjaxManager ID="radAjaxManager" runat="server">

 

 

 

<AjaxSettings>

 

 

<telerik:AjaxSetting AjaxControlID="RadDockZone1">

 

 

<UpdatedControls>

 

 

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

 

 

 

</UpdatedControls>

 

 

</telerik:AjaxSetting>

 

 

</AjaxSettings>

 

 

</telerik:RadAjaxManager>

 

 

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" InitialDelayTime="5000" Skin="Vista" runat="server">

 

 

 

</telerik:RadAjaxLoadingPanel>

 

 

<telerik:RadDockLayout ID="RadDockLayout1" runat="server" Skin="Vista">

 

 

 

<asp:Panel ID="pn" runat="server">

 

 

<table cellspacing="0" cellpadding="0">

 

 

<tr>

 

 

<td >

 

 

<telerik:RadDockZone Width="420px" runat="server" ID="RadDockZone1" Orientation="vertical" >

 

 

 

<telerik:RadDock runat="server" ID="UserInfo" Title="My Portal" EnableAnimation="true">

 

 

<ContentTemplate>

 

 

 

<p class="innerWrp">

 

Welcome back,

<br />

 

Mr. John Smith

<br />

 

<%

= DateTime.Now.ToShortDateString() %>

 

 

</p>

 

 

 

</ContentTemplate>

 

 

</telerik:RadDock>

 

 

<telerik:RadDock runat="server" ID="MyContacts" Title="My Contacts" Collapsed="true" EnableAnimation="true">

 

 

<ContentTemplate>

 

 

<p class="innerWrp">

 

Phone: [phone]

<br />

 

E-mail: [e-mail]

<br />

 

Address: 64 Bay Str, Melville

 

</p>

 

 

</ContentTemplate>

 

 

</telerik:RadDock>

 

 

<telerik:RadDock runat="server" Resizable="true" ID="News" Title="Telerik News" EnableAnimation="true">

 

 

<ContentTemplate>

 

 

<div class="innerWrp">

 

 

<uc2:News ID="NewsControl" runat="server"></uc2:News>

 

 

</div>

 

 

</ContentTemplate>

 

 

</telerik:RadDock>

 

 

</telerik:RadDockZone>

 

 

</td>

 

 

</tr>

 

 

<tr>

 

 

<td>

 

 

<telerik:RadDockZone Width="420px" runat="server" ID="RadDockZone2"

 

 

Orientation="vertical" CssClass="red" >

 

 

<telerik:RadDock runat="server" ID="RadDock1" Title="My Portal" EnableAnimation="true">

 

 

<ContentTemplate>

 

 

<p class="innerWrp">

 

Welcome back,

<br />

 

Mr. John Smith

<br />

 

<%

= DateTime.Now.ToShortDateString() %>

 

 

</p>

 

 

</ContentTemplate>

 

 

</telerik:RadDock>

 

 

<telerik:RadDock runat="server" ID="RadDock2" Title="My Contacts" EnableAnimation="true">

 

 

<ContentTemplate>

 

 

<p class="innerWrp">

 

Phone: [phone]

<br />

 

E-mail: [e-mail]

<br />

 

Address: 64 Bay Str, Melville

 

</p>

 

 

</ContentTemplate>

 

 

</telerik:RadDock>

 

 

<telerik:RadDock runat="server" Resizable="true" ID="RadDock3" Title="Telerik News" EnableAnimation="true">

 

 

<ContentTemplate>

 

 

<div class="innerWrp">

 

 

<uc2:News ID="News1" runat="server"></uc2:News>

 

 

</div>

 

 

</ContentTemplate>

 

 

</telerik:RadDock>

 

 

</telerik:RadDockZone>

 

 

</td>

 

 

</tr>

 

 

</table>

 

 

</asp:Panel>

 

 

 

</telerik:RadDockLayout>

 

 

</form>

 

</

 

body>

 

</

 

html>

 

[Pavlina]

Hi Srinivasa,

To achieve the desired functionality you have two possible options:

• place the instance of RadDockLayout into an AjaxPanel - in this case, the control will update all other controls in the panel via AJAX request
• place one AJAX Manager on the page and in its property builder set the controls in the ContentTemplate as ajax initiator and updated control.

Moreover, I am attaching the implementation of the first approach in a simple runnable project. Give it a try and let me know if it works for you.

Greetings,

Pavlina
the Telerik team