[Solved] Progress Animation On Save Command using RadAjaxLoadingPanel

[Steve]

Hi

I have followed the instructions in this article to allow me to add a Save button to my toolbar which uses a RadAjaxManager to run some Javascript which causes a postback to the server. 

When the user presses the Save button I want to display a "Saving ..." animation while the server side script is executing.  Is there an example which shows how this can be achieved using the RadAjaxLoadingPanel and RadAjaxManager ?

Thanks

Steve

[Rumen]

Hi Steve,

I was able to implement the requested scenario using a hidden <asp:Button that is programmatically clicked by the Save / Cancel buttons and invokes the AjaxLoadingPanel, e.g.

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest">
 <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="Button1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="RadEditor1" LoadingPanelID="RadAjaxLoadingPanel1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>
<telerik:RadAjaxLoadingPanel Skin="Web20" ID="RadAjaxLoadingPanel1" runat="server" ></telerik:RadAjaxLoadingPanel>

<telerik:RadEditor ID="RadEditor1" runat="server" Skin="Web20" ToolsFile="~/ToolsFile.xml"></telerik:RadEditor>
<asp:Button ID="Button1" style="display:none;" runat="server" Text="Button"  />

<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
<script type="text/javascript">
    RadEditorCommandList["Save"] = function(commandName, editor, oTool)
    {
        $get("Button1").click();
        setTimeout(function()
       {
            ajaxRequest("Save");
       },   1000);
    }
    RadEditorCommandList["Cancel"] = function(commandName, editor, oTool)
    {
        $get("Button1").click();
        setTimeout(function()
       {
            ajaxRequest("Cancel");
       },   1000);
    }
    function ajaxRequest(operation)
    {
      var ajaxManager = <%= RadAjaxManager1.ClientID %>;
      ajaxManager.ajaxRequest(operation);
    }
    </script>
</telerik:RadScriptBlock>

In the codebehind:

protected void RadAjaxManager1_AjaxRequest(object sender, Telerik.Web.UI.AjaxRequestEventArgs e)
{
    if (e.Argument == "Save")
    {
        RadAjaxManager1.Alert("Save");
    }
    else
    {
        RadAjaxManager1.Alert("Cancel");
    }
}

For your convenience I have attached my test project.

Sincerely yours,
Rumen
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.