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

How to show loading icon in RadWindow

7 Answers 334 Views
Ajax
This is a migrated thread and some comments may be shown as answers.
john
Top achievements
Rank 1
john asked on 15 Sep 2012, 02:43 PM
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?

7 Answers, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 1
answered on 17 Sep 2012, 08:02 AM
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.
0
john
Top achievements
Rank 1
answered on 17 Sep 2012, 02:04 PM
My RadWindow load another new page instead only include some content under the same page, how can I do?
0
Princy
Top achievements
Rank 1
answered on 18 Sep 2012, 06:59 AM
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.
0
john
Top achievements
Rank 1
answered on 19 Sep 2012, 02:05 AM
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);
    }
0
Marin Bratanov
Telerik team
answered on 19 Sep 2012, 01:36 PM
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
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.
0
Devinder
Top achievements
Rank 1
answered on 27 Sep 2013, 01:37 PM
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
0
Maria Ilieva
Telerik team
answered on 02 Oct 2013, 08:52 AM
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
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 the blog feed now.
Tags
Ajax
Asked by
john
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 1
john
Top achievements
Rank 1
Marin Bratanov
Telerik team
Devinder
Top achievements
Rank 1
Maria Ilieva
Telerik team
Share this question
or