Trigger RadAjaxLoadingPanel from RadWizard Finish Button

2 posts, 0 answers
  1. Chris
    Chris avatar
    10 posts
    Member since:
    Feb 2014

    Posted 01 Oct 2015 Link to this post

    Hello!

     

    I have a content page with a RadWizard and a RadAjaxManagerProxy. In my MasterPage, I have a RadAjaxLoadingPanel that's used globally.

    I would like to trigger the RadAjaxLoadingPanel when the "Finish" button in the RadWizard has been fired. As you can see from my code below, I tried adding a reference to the wizard from itself in the Proxy with the loadingPanel ID but it doesn't work, so I'm guessing I have to wire it up through jquery in my OnClientButtonClicking() function?

     

    MasterPage: 

    <body class="index">
        <form id="form1" runat="server">
      
            <!-- Script Manager -->
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
                <Scripts>
                    <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" />
                </Scripts>
            </telerik:RadScriptManager>
      
            <!-- Ajax Manager -->
            <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="defaultLoadingPanel">
            </telerik:RadAjaxManager>
      
            <!-- Default Loading Panel -->
            <telerik:RadAjaxLoadingPanel ID="defaultLoadingPanel"
                runat="server"
                BackgroundPosition="Center"
                IsSticky="true"
                CssClass="MyModalPanel"
                Transparency="10"
                Skin="MetroTouch" />
      
      
    ...
      
        </form>
    </body>

     

    Content Page: 

    <!-- Javascript -->
    <script type="text/javascript">
            function OnClientButtonClicking(sender, args) {
                var command = args.get_command();
     
                if (command == 3) {
                    args.set_cancel(!window.confirm("<% =CancelMessage %>"));
                }
            }
    </script>​
     
      
    <!-- AJAX Proxy Manager -->
    <telerik:RadAjaxManagerProxy runat="server" ID="ajaxProxy">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="wizOrganization">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="wizOrganization" LoadingPanelID="defaultLoadingPanel" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManagerProxy>
      
      
      
      
    <telerik:RadWizard runat="server" ID="wizOrganization"
        Skin="MetroTouch"
        RenderedSteps="All"
        DisplayCancelButton="true"
        DisplayNavigationBar="true"
        DisplayProgressBar="true"
        Width="100%"
        DisplayNavigationButtons="true"
        NavigationButtonsPosition="Bottom"
        ProgressBarPosition="left"
        NavigationBarPosition="left"
        OnClientButtonClicking="OnClientButtonClicking">
      
        <WizardSteps>
      
            <telerik:RadWizardStep runat="server"
                Title="Step1"
                ID="wizStep_1"
                CausesValidation="false"
                ToolTip="Step1">
      
                {fields}
      
            </telerik:RadWizardStep>
      
            <telerik:RadWizardStep runat="server"
                Title="Step2"
                ID="wizStep_2"
                CausesValidation="false"
                ToolTip="Step2">
      
                {fields}
      
            </telerik:RadWizardStep>
      
            <telerik:RadWizardStep runat="server"
                Title="Step3"
                ID="wizStep_3"
                CausesValidation="false"
                ToolTip="Step3">
      
                {fields}
      
            </telerik:RadWizardStep>
        </WizardSteps>
    </telerik:RadWizard>
     

     

    Thanks for your help!

    Chris

  2. Peter Filipov
    Admin
    Peter Filipov avatar
    1028 posts

    Posted 06 Oct 2015 Link to this post

    Hello Chris,

    Please review the LoadingPangel documentation how to show and hide the control. When the loading panel is related with an ajax manager or panel it will be shown only if an ajax postback occurs. 

    Regards,
    Peter Filipov
    Telerik
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top