How to show loading icon in RadWindow

8 posts, 0 answers
  1. john
    john avatar
    67 posts
    Member since:
    Jan 2012

    Posted 15 Sep 2012 Link to this post

    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?
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 17 Sep 2012 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. john
    john avatar
    67 posts
    Member since:
    Jan 2012

    Posted 17 Sep 2012 Link to this post

    My RadWindow load another new page instead only include some content under the same page, how can I do?
  5. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 18 Sep 2012 Link to this post

    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.
  6. john
    john avatar
    67 posts
    Member since:
    Jan 2012

    Posted 18 Sep 2012 Link to this post

    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);
        }
  7. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3600 posts

    Posted 19 Sep 2012 Link to this post

    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.
  8. Devinder
    Devinder avatar
    2 posts
    Member since:
    Feb 2013

    Posted 27 Sep 2013 Link to this post

    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
  9. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 02 Oct 2013 Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017