The loading icon is still in there while a custom is handled

[john]

I have a RadGrid and be put under a RadAjaxLoadingPanel and RadAjaxManager. When click a button to trigger a AJAX post back, my code will have a exception, then I register a RadScriptManager_AsyncPostBackError event to pass the error message to client as following javascript code:

 Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function(sender, args)
       {
            var error = args.get_error();
            if (error != undefined && error.httpStatusCode == '500')
            {
                args.set_errorHandled(true);
                var message = error.message.replace(error.name + ":","");
alert(message);
            }
       });

My concern is that the loading icon in RadGrid is still running at the left-bottom corner as attached image. I don't know why and how to let it not running.

[john]

Any solution?

[john]

Any solution?

[Maria Ilieva]

Hi John,

I would suggests you to try hiding the RadAjaxLoadingPanel using its hide() method. See the following help topic for more information on this appraoch:

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

Give this a try and let me know if it helps.

Kind regards,
Maria Ilieva
the Telerik team

[john]

Hi, 

I see you given URL, but I cannot know how to call the hide method to hidden the icon in RadGrid. Also, my add_endRequest event is defined in Master page instead of a special page. How can I handle it for all pages which have RadGrid?

[Maria Ilieva]

Hello John,

In case the problem appear with the RadGrid status bar and not with an independent RadAjaxLoadingPanel control the previously proposed approach would not  be applicable. I suppose that the reason for the issue is mostly in a client error that might appear during the server request. Could you please use some of the browser dev tools and inspect the problematic request to verify if any js errors appear?


Greetings,
Maria Ilieva
the Telerik team

[john]

Hi Maria Ilieva,

You can see the following code to simulate the behavior. There is no error in javascript.

ASPX page:
<telerik:RadScriptManager ID="RadScriptManager1" runat="server" OnAsyncPostBackError="RadScriptManager_AsyncPostBackError">
        <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>
    <telerik:RadAjaxManager ID="RadAjaxManager" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadGridFunction">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGridFunction" LoadingPanelID="RadAjaxLoadingPanelFunction" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanelFunction" runat="server" />
    <telerik:RadGrid runat="server" ID="RadGridFunction" AutoGenerateColumns="true" CellSpacing="0"
        Width="850px" GridLines="None" OnUpdateCommand="RadGridFunction_UpdateCommand" ShowStatusBar="true"  AllowPaging="true" >
        <MasterTableView DataKeyNames="ID">
            <Columns>
                <telerik:GridEditCommandColumn>
                </telerik:GridEditCommandColumn>
            </Columns>
        </MasterTableView>
        <ClientSettings EnableRowHoverStyle="true">
            <Selecting AllowRowSelect="true" />
        </ClientSettings>
        <ValidationSettings CommandsToValidate="PerformInsert,Update" />
        <PagerStyle AlwaysVisible="true" />
    </telerik:RadGrid>
    </telerik:RadAjaxLoadingPanel>
    <script>
        Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function (sender, args) {
            var error = args.get_error();
            if (error != undefined && error.httpStatusCode == '500') {
                args.set_errorHandled(true);
            }
        });
    </script>


CS code:
 protected void Page_Load(object sender, EventArgs e)
    {
        DataTable dt = new DataTable();
        dt.Columns.Add("ID");
        dt.Columns.Add("Name");


        for (int i = 0; i < 10; i++)
        {
            DataRow dr = dt.NewRow();
            dr["ID"] = i.ToString();
            dr["Name"] = "Name:" + i.ToString();
            dt.Rows.Add(dr);
        }


        this.RadGridFunction.DataSource = dt;
        this.RadGridFunction.DataBind();
    }


    protected void RadGridFunction_UpdateCommand(object sender, GridCommandEventArgs e)
    {
        throw new Exception();
    }
    protected void RadScriptManager_AsyncPostBackError(object sender, AsyncPostBackErrorEventArgs e)
    {
        RadScriptManager1.AsyncPostBackErrorMessage = e.Exception.Message;
    }

[Maria Ilieva]

Hi John,

I tested the provided code and was able to replicate the problematic behaviour. However please note that when using this approach for error handling the presented behaviour is expected. You are actually throwing an error on Update Command which is terminating the whole thread. In this case you should catch this error and continue the thread. See the help topic below for more information on error handling with ajax:
http://www.telerik.com/help/aspnet-ajax/ajax-error-handling.html

Greetings,
Maria Ilieva
the Telerik team

[john]

Currently, I handle all exception in RadScriptManager_AsyncPostBackError under master page in that case I no need to add any try catch block in all event which maybe throw exception. In RadScriptManager_AsyncPostBackError event, I will decide which exception need to show user and which exception need to be logged into log file and redirect to Error page.

[TonyG]

I have a scenario very similar to John's. I present a list of file names to the users and give them buttons to press to get each file. I don't just expose file links. So a call is made to the server where I identify the right file. I clear the Response object and manually craft the response with the right content-type, like for Microsoft Word or Excel. When done, I use Response.Flush() and then Response.End().

Now, Response.End() is required, but it always throws an exception. Despite that the response is returned to the client browser, and the user gets to download the file or choose the app to open it.

But at this point there's nothing in the Response to tell the RadLoadingPanel to Hide.

So, following the links above (here and here) I see that we should be able to manually hide the panel. The following is my failed attempt at this. Can someone correct this?

<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
    <script type="text/javascript">
        var currentLoadingPanel = null;
        var displayOverPanel = null;
        function pageLoad(sender, eventArgs) {
            if (!eventArgs.get_isPartialLoad()) {
                $find("<%= RadAjaxManager1.ClientID %>").ajaxRequest("InitialPageLoad");
                currentLoadingPanel = $find("<%= ralp1.ClientID %>");
                displayOverPanel = $find("<%= pLoading.ClientID %>");
                Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
            }
        }
        function EndRequestHandler(sender, args) {
            if (args.get_error() != undefined && args.get_error().httpStatusCode == '500')
            {
                if (currentLoadingPanel != null)
                    currentLoadingPanel.hide(displayOverPanel);
            }
        }

<asp:Panel ID="pLoading" runat="server" Style="position: absolute; top: 70px; left: 800px;
        width: 120px; height: 80px; z-index: 1000;">
   <telerik:RadAjaxLoadingPanel ID="ralp1" runat="server" Height="50px" Width="120px" IsSticky="true" Skin="">
      <asp:Image ID="ralpimg" ImageUrl="~/Images/tire3.gif" runat="server" AlternateText="Loading..." />
   </telerik:RadAjaxLoadingPanel>
</asp:Panel>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="ralp1"
        OnAjaxRequest="RadAjaxManager1_AjaxRequest"> ...   </telerik:RadAjaxManager>

protected void RadAjaxManager1_AjaxRequest(object sender, Telerik.Web.UI.AjaxRequestEventArgs e)
{
    if (e.Argument == "InitialPageLoad")
        System.Threading.Thread.Sleep(100); // necessary?
}

I think the problem is that since the loading panel is in the panel pLoading, and I'm not using currentLoadingPanel.show(displayOverPanel) to do the display, then the .hide() isn't hiding what's not there. Should pLoading be in the AjaxManager somewhere as an updated control? If so, what's the trigger?

I'm including the AjaxRequest call-behind because it's referenced in the RadAjaxManager markup, and its absence would make this incomplete. But since it's there - there reason why it's there is to display the loading panel on initial page load - but that's not happening either, even if I increase the sleep from 100 to 5000. Ideas welcome on that too.

Thanks!!!

[TonyG]

With assistance from Telerik Support, my issue was resolved though it's not a complete solution to the scenario presented in this thread. Support was suggesting that for different events that I display different panels with animated icons. But I don't think that's practical in an application with lots of user controls, hundreds of server controls, and a single RadAjaxManager in the top-level Page.

So, since I'm triggering an event which is known to cause an exception, my solution would be simply to not display the loading icon when the user initiates the action. In other words, I have a button which launches a report and the process throws an exception, so the solution is not to show the loading panel when the user clicks that button - it's not shown so I don't need to worry about hiding it, which is the theme of this thread.

Significant bits are below:

<telerik:RadAjaxManager ID="ram1" runat="server" DefaultLoadingPanelID="ralp1"...>
    <ClientEvents OnRequestStart="requestStart" />
...

function requestStart(sender, args) {
  if (args.get_eventTarget().indexOf("$ucReports$b") > 0)
    args.set_enableAjax(false);
}

In the user control ucReports I'm generating the buttons, one for each report that needs to be displayed - so I have a consistent pattern to the button Unique ID. YMMV

I hope that helps someone.

[Maria Ilieva]

Hi Tony,

Thank you for sharing your approach. I'm sure it will be of a great help for the other users which try to implement the same sceanrio.

Greetings,
Maria Ilieva
the Telerik team

[TonyG]

It's interesting that I should stumble on this issue again some months later.

I have a JS method OnUIAction that helps to coordinate the state of various controls. So in my RadScriptBlock I have:

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(OnUIAction(null, null, 'other'));

When executed on a postback the loading panel doesn't hide. I needed to add this to my code:

var currentLoadingPanel = null;
...
function init() { // executed from body onload
...
   currentLoadingPanel = $find("<%= entertainment.ClientID %>");
}
function OnUIAction(sender, args, action) {
...
   currentLoadingPanel.hide();
}

This is just an FYI to anyone doing this sort of thing - that even without an error condition the loading panel may not hide. I'm also directly hiding the loading panel because I don't have a panel surrounding it. I wasn't sure if that was going to work but for now it seems to.

HTH

[Eyup]

Hello Tony,

Thank you again for sharing your research on the matter. I guess your scenario is a bit specific and requires additional handling. Generally, showing and hiding the loading panel should work correctly as the demonstrated sample case:
http://www.telerik.com/help/aspnet-ajax/ajax-show-hide-loadingpanel.html

Please feel free to add any information which you think may help other developers.

Regards,
Eyup
Telerik