How to show loading icon in RadWindow

[john]

If I click a button to pop up a RadWindow which include a save button. How to design to have loading panel  in whole RadWindow while clicking the save button?

[Princy]

Hi John,

In order to display a loading panel inside the RadWindow you need to wrap the content in a panel and set it to be an AjaxUpdatedControl when the AjaxControlID property is set to the ID of the save button.

Please note that the size of this panel depends on the content. You need to set it explicitly in order for the AutoSize to work properly. Or, you could set the size manually and not use the AutoSize functionality at all.

Here is the sample code that I tried.

ASPX:

<telerik:RadAjaxManager runat="server" ID="RadAjaxManager1"></telerik:RadAjaxManager>
    <telerik:RadWindow runat="server" ID="RadWindow1" Modal="true" VisibleOnPageLoad="true" AutoSize="true">
        <ContentTemplate>
            <asp:Panel runat="server" ID="Panel1" Width="200">
                <asp:Button ID="Button1" Text="Button Save. Ajaxified." runat="server" OnClick="Button1_Click" />
                <br />
                Other content that should be hidden by the update panel goes here
                <br />
                <br />
                Note that the size of this panel depends on the content. You need to set it explicitly in order for the AutoSize to work proeprly
                <br />
                Or, you could set the size manually and not use the AutoSize functionality
             </asp:Panel>
        </ContentTemplate>
    </telerik:RadWindow>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="WebBlue">
    </telerik:RadAjaxLoadingPanel>

    <telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxy1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="Button1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="Panel1" LoadingPanelID="RadAjaxLoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManagerProxy>

C#:

protected void Button1_Click(object sender, EventArgs e)
    {
        System.Threading.Thread.Sleep(3000);
    }

Thanks,
Princy.

[john]

My RadWindow load another new page instead only include some content under the same page, how can I do?

[Princy]

Hi John,

Please try the following code to achieve your scenario.

Parent Page
ASPX:

<telerik:RadWindowManager ID="RadWindowManager1" runat="server">
   <Windows>
       <telerik:RadWindow ID="RadWindow1" runat="server" NavigateUrl="Window.aspx"  AutoSize="true" VisibleOnPageLoad="true"></telerik:RadWindow>
   </Windows>
</telerik:RadWindowManager>

Child Page
ASPX:

<telerik:RadAjaxManager runat="server" ID="RadAjaxManager1"></telerik:RadAjaxManager>
    <asp:Panel runat="server" ID="Panel1" Width="200">
                <asp:Button ID="Button1" Text="Button Save. Ajaxified." runat="server" OnClick="Button1_Click" />
                <br />
                Content
    </asp:Panel>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="WebBlue">
    </telerik:RadAjaxLoadingPanel>
    <telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxy1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="Button1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="Panel1" LoadingPanelID="RadAjaxLoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManagerProxy>

C#:

protected void Button1_Click(object sender, EventArgs e)
{
   System.Threading.Thread.Sleep(2000);
}

Hope this helps.

Thanks,
Princy.

[john]

As your solution, It will pop up a js error while select first dropdownlist. You can check my code:
Parent Page:
<telerik:RadWindowManager ID="RadWindowManager" Skin="Default" runat="server">
        <Windows>
            <telerik:RadWindow ID="New" runat="server" Title="" Height="470px"
                Width="690px" ShowContentDuringLoad="false" Modal="true">
            </telerik:RadWindow>
        </Windows>
    </telerik:RadWindowManager>
    <script>
        function test() {
            window.radopen("New.aspx", "New");
        }
    </script>
    <input type="button" onclick="test();" value="Test" />

Child Page:
ASPX Code:
<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        <Scripts>
            <%--Needed for JavaScript IntelliSense in VS2010--%>
            <%--For VS2008 replace RadScriptManager with ScriptManager--%>
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
        </Scripts>
    </telerik:RadScriptManager>
    <asp:Panel runat="server" ID="Panel" Width="600px" Height="300px">
        <telerik:RadComboBox runat="server" ID="RadComboBoxRuleType" Skin="Office2010Blue"
            AutoPostBack="true" CausesValidation="false" OnSelectedIndexChanged="RadComboBoxRuleType_SelectedIndexChanged">
            <Items>
                <telerik:RadComboBoxItem Text="AAA" />
                <telerik:RadComboBoxItem Text="BBB" />
                <telerik:RadComboBoxItem Text="CCC" />
            </Items>
        </telerik:RadComboBox>
        <telerik:RadComboBox runat="server" ID="RadComboBoxFunctionType" Skin="Office2010Blue"
            CausesValidation="false">
        </telerik:RadComboBox>
        <telerik:RadAjaxLoadingPanel runat="server" Skin="" ID="RadAjaxLoadingPanelFuncdtion"
            OnClientShowing="clientShowing" Transparency="30" AlternateText="Loading">
            <div style="background-color: #F5F5F5; width: 161px; height: 24px">
            </div>
            <asp:Image runat="server" ID="dd" ImageUrl="~/loading.gif" Style="position: relative;
                margin-left: 165px; margin-top: -21px; background-color: #F5F5F5;" />
        </telerik:RadAjaxLoadingPanel>
        <telerik:RadButton ID="RadButtonSave" runat="server" Text="Save" Skin="Sitefinity"
            OnClick="RadButtonSave_Click">
            <Icon PrimaryIconCssClass="rbSave" PrimaryIconLeft="4" SecondaryIconTop="4" />
        </telerik:RadButton>
        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanelWindow" runat="server" Skin="WebBlue">
        </telerik:RadAjaxLoadingPanel>
        <telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxy" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadButtonSave">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="Panel" LoadingPanelID="RadAjaxLoadingPanelWindow" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManagerProxy>
        <telerik:RadAjaxManager ID="RadAjaxManager" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadComboBoxRuleType">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadComboBoxFunctionType" LoadingPanelID="RadAjaxLoadingPanelFuncdtion" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
    </asp:Panel>

CS Code:
 protected void RadComboBoxRuleType_SelectedIndexChanged(object sender, RadComboBoxSelectedIndexChangedEventArgs e)
    {
        this.RadComboBoxFunctionType.Items.Add(new RadComboBoxItem("DD", "BB"));
    }


    protected void RadButtonSave_Click(object sender, EventArgs e)
    {
        Thread.Sleep(5000);
    }

[Marin Bratanov]

Hi John,

What you have is nested update panels and you wish to only dispose the inner one. This cannot happen even with the standard MS AJAX controls. The update panel that we create around Panel1 will also envelop the RadComboBoxRuleType RadComboBox and dispose it, which is the cause of the JavaScript error caused by the secondary setting related to the comboboxes only.

What you need is the following:
0. Since you are working on the same page you only need the RadAjaxManager control and not the proxy
1. move the RadAjaxManager out of all update panels, e.g. as the first control below the script manager
2. remove the setting for the comboboxes, as it is not necessary, you already have AJAX functionality in place:

in the child page:

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
</telerik:RadScriptManager>
<telerik:RadAjaxManager ID="RadAjaxManager" runat="server" UpdateInitiatorPanelsOnly="true">
    <AjaxSettings>
        <%--<telerik:AjaxSetting AjaxControlID="RadComboBoxRuleType">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="RadComboBoxFunctionType"  />
                <telerik:AjaxUpdatedControl ControlID="RadComboBoxRuleType"  />
            </UpdatedControls>
        </telerik:AjaxSetting>--%>
        <telerik:AjaxSetting AjaxControlID="RadButtonSave">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="Panel1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanelWindow" runat="server" Skin="WebBlue">
</telerik:RadAjaxLoadingPanel>
<telerik:RadAjaxLoadingPanel runat="server" Skin="" ID="RadAjaxLoadingPanelFuncdtion"
    OnClientShowing="clientShowing" Transparency="30" AlternateText="Loading">
    <div style="background-color: #F5F5F5; width: 161px; height: 24px">
    </div>
    <asp:Image runat="server" ID="dd" ImageUrl="~/loading.gif" Style="position: relative;
        margin-left: 165px; margin-top: -21px; background-color: #F5F5F5;" />
</telerik:RadAjaxLoadingPanel>
<asp:Panel runat="server" ID="Panel1" Width="600px" Height="300px">
    <telerik:RadComboBox runat="server" ID="RadComboBoxRuleType" Skin="Office2010Blue"
        AutoPostBack="true" CausesValidation="false" OnSelectedIndexChanged="RadComboBoxRuleType_SelectedIndexChanged">
        <Items>
            <telerik:RadComboBoxItem Text="AAA" />
            <telerik:RadComboBoxItem Text="BBB" />
            <telerik:RadComboBoxItem Text="CCC" />
        </Items>
    </telerik:RadComboBox>
    <telerik:RadComboBox runat="server" ID="RadComboBoxFunctionType" Skin="Office2010Blue"
        CausesValidation="false">
    </telerik:RadComboBox>
    <telerik:RadButton ID="RadButtonSave" runat="server" Text="Save" Skin="Sitefinity"
        OnClick="RadButtonSave_Click">
        <Icon PrimaryIconCssClass="rbSave" PrimaryIconLeft="4" SecondaryIconTop="4" />
    </telerik:RadButton>
</asp:Panel>
<script type="text/javascript">
    function clientShowing()
    {

    }
</script>

Greetings,
Marin Bratanov
the Telerik team

[Devinder]

Hi,
I am having a popup page (rad window) which has a save button.After saving the data on the page it gets closed and the calling page is being refreshed. I am trying to show the loading panel on Save click, which seems working fine for Save functionality. But now it does not close the rad window and the control does not come back to the calling page. Any help on this will be appreciated. Thanks.

Regards,
Devinder

[Maria Ilieva]

Hi Devinder,

In order to show Loading Panel on Save button click you could simply invoke a manual ajaxRequest on client ButtonClick event and explicitly show and hide the Loading Panel as shown in the help topic below:

http://www.telerik.com/help/aspnet-ajax/ajax-show-hide-loadingpanel.html

I hope this helps.

Regards,
Maria Ilieva
Telerik