RadAjaxLoadingPanel and RadAjaxPanel

[Steven Black]

Hello,

I have a page with a lot of controls doing postbacks.  I thought it would be cleaner to simply have my controls within a RadAjaxPanel rather than deal with all of the controls within a RadAjaxManager.

I would like to display a RadAjaxLoadingPanel when one particular control is causing the postback though.

Is there any way to do this using the RadAjaxPanel, or do I need to use the RadAjaxManager?

Thanks.

Steve

[Princy]

Hello Steve,

Check out the following help document which explains on how to conditionaly display loading panel wherein the panel is diaplyed in OnRequestStart, and hidden in the onResponseEnd client events of the RadAjaxManager. You can try out the same logic using the RadAjaxPanel also.
Show and hide loading panel explicitly

Thanks
Princy.

[Steven Black]

Thanks for the response Princy.  I think I must be doing something wrong, because it's still not working as expected. 

My page is a content page.  On it I have a RadAjaxPanel with the following tag:

<telerik:RadAjaxPanel ID="pnlPage" runat="server" ClientEvents-OnRequestStart="RequestStart">

 

 

Below the ending tag, I have 

 

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Transparency="10" BackColor="#E0E0E0">
        <table style="width:100%;height:100%;">
            <tr style="height:100%">
                <td align="center" valign="middle" style="width:100%">
                    <img alt="Loading..." src="Images/loading.gif" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" />
                </td>
            </tr>
        </table>
    </telerik:RadAjaxLoadingPanel>

    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script type="text/javascript">
           var currentLoadingPanel = null;
           var currentUpdatedControl = null;
           function RequestStart(sender, args)
           {
               currentLoadingPanel = $find("RadAjaxLoadingPanel1");

               if (args.get_eventTarget() == "drpAgentID")
                {
                   currentUpdatedControl = "pnlPage";
                   //show the loading panel over the updated control
                    currentLoadingPanel.show(currentUpdatedControl);
                }
           }
           function ResponseEnd()
           {
               //hide the loading panel and clean up the global variables
               if (currentLoadingPanel != null)
                   currentLoadingPanel.hide(currentUpdatedControl);
               currentUpdatedControl = null;
               currentLoadingPanel = null;
           }
       </script>
   </telerik:RadCodeBlock>

 

I am hoping to display the loading panel when I change the selected index of 'drpAgentID' but not when I do any other postbacks on the page (although I still want asynchronous postbacks for the others, which is why everything is contained within my RadAjaxPanel).

With the above, I never see the loading panel, even when I change drpAgentID (AutoPostBack is set to true and the code-behind works fine).

I then changed my panel tag to be as follows:

<telerik:RadAjaxPanel ID="pnlPage" runat="server" ClientEvents-OnRequestStart="RequestStart" LoadingPanelID="RadAjaxLoadingPanel1">

(Notice the addition of the LoadingPanelID property).  With that, I see the loading panel on EVERY postback, not just the ones from drpAgentID.

Any help would be appreciated.

Thanks.

Steve

[Iana Tsolova]

Hi,

I followed your scenario and prepared a sample project for you. Please try it on your end and let me know if it works as desired and if I missed something from your logic.

Kind regards,
Iana
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Steven Black]

Hello Iana,

Thank you for the project file.  I don't think it's going to work in my application because your sample did not have the example within a Content Page.  The following code block:

function RequestStart(sender, args)
           {
               if (args.get_eventTarget() == "DropDownList1")
                {
               currentLoadingPanel = $find("RadAjaxLoadingPanel1");

                   currentUpdatedControl = "RadAjaxPanel1";
                   //show the loading panel over the updated control
                    currentLoadingPanel.show(currentUpdatedControl);
                }
           }

will not work properly because "DropDownList1", "RadAjaxLoadingPanel1" and "RadAjaxPanel1" will not be recognized at runtime.

Can you please create a Master Page and then make your aspx page (ShowHideLoadingPanel.aspx) a Content Page of that Master Page?  Then if you can get that to work as expected, that would be a big help.

Thanks.

Steve

[Iana Tsolova]

Hello Steven,

Here it is attached the desired sample. Check it out and let me know if it helps. 

Regards,
Iana
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Steven Black]

Hello Iana,

Thank you for providing the revised sample.  That is exactly what I needed.  Can I ask you one more question regarding the following code?

function RequestStart(sender, args)
           {
               if (args.get_eventTarget() == "<%= DropDownList1.UniqueID %>")
                {
               currentLoadingPanel = $find("<%= RadAjaxLoadingPanel1.ClientID %>");

                   currentUpdatedControl = "<%= RadAjaxPanel1.ClientID %>";
                   //show the loading panel over the updated control
                    currentLoadingPanel.show(currentUpdatedControl);
                }
           }

How do you know when to use UniqueID versus ClientID?

Thanks.

Steve

[Iana Tsolova]

Hi Steven,

The get_eventTarget() property returns the UniqueID of the ajax initiator control, therefore I compare it with the DropDownList UniqueID. the $find() method requires the controls ClientID as a parameter. And the show() and hide() methods of RadAjaxLoadingPanel needs the client id of the control which to be/is displayed over.

Regards,
Iana
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[John]

Thanks for this forum post.  I think it would be very helpful if you could update the documentation: http://www.telerik.com/help/aspnet-ajax/ajxshowhideloadingpanel.html it doesn't show any of the client ids or unique ids in this documentation which causes alot of headaches trying to figure out what is expected to be passed in.  My guessing of combiniations of all uniqueids, all clientids, some clients and some uniques didn't work out till I found this.

John

[Iana Tsolova]

Hi John,

Thank you for pointing this issue to us. We will update the help topic accordingly.
Additionally, you can find this new online demo useful as well.

Best wishes,
Iana
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.