This is a migrated thread and some comments may be shown as answers.

RadAjaxLoadingPanel not showing up correctly

3 Answers 196 Views
Ajax
This is a migrated thread and some comments may be shown as answers.
Charles
Top achievements
Rank 1
Charles asked on 29 May 2012, 05:56 PM
Hi,

I am working on a rather large web app that has separate instances of the same web user control used on multiple steps of an ASP.NET Wizard control.

I am triggering an ajax postback via javascript:

 

var manager = $find("<%=RadAjaxManager.GetCurrent(Page).ClientID %>");
var textBoxId = "<%= txtSearchFilter.UniqueID %>";
if (manager && textBoxId) {
    manager.ajaxRequestWithTarget(textBoxId, searchText);
}

 

 

 

The web user control's markup contains the following:

 

<telerik:RadAjaxManagerProxy ID="radAjaxManagerListSelections" runat="server">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="txtSearchFilter">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="lstBxAvailableItems" LoadingPanelID="radLoadingPanel1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
        <telerik:AjaxSetting AjaxControlID="lstBxAvailableItems">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="lstBxSelectedItems" LoadingPanelID="radLoadingPanel1" />
                <telerik:AjaxUpdatedControl ControlID="lstBxAvailableItems" LoadingPanelID="radLoadingPanel1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
        <telerik:AjaxSetting AjaxControlID="lstBxSelectedItems">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="lstBxSelectedItems" LoadingPanelID="radLoadingPanel1" />
                <telerik:AjaxUpdatedControl ControlID="lstBxAvailableItems" LoadingPanelID="radLoadingPanel1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManagerProxy>
  
<telerik:RadAjaxLoadingPanel ID="radLoadingPanel1" runat="server" Skin="Sitefinity" MinDisplayTime="1000">
</telerik:RadAjaxLoadingPanel>

The problem I'm experiencing is that the loading panel shows up correctly in the first step of the wizard, but on subsequent steps that utilize the same web user control, the loading panel does not show up.

All data posts correctly on the subsequent steps, but the loading panels do not display. My first thought was that the code was getting confused with the control clientIDs, but it appears as if the rendering for each step is putting the right id values into my javascript server blocks. I'm not sure how to verify that the loading panel is targeted to the correct clientID values though when looking at the source for the rendered page.

I am removing the loading panels for now to keep the look and feel uniform for each step, but I would really like to solve this problem as the loading panels definitely add something to the user experience.

Thanks,

Charlie

3 Answers, 1 is accepted

Sort by
0
Maria Ilieva
Telerik team
answered on 01 Jun 2012, 12:11 PM
Hello Charles,

Could you please try to show the RadAjaxLoadingPanel explicitly on ajax request as shown in the help topic below:
http://www.telerik.com/help/aspnet-ajax/ajax-show-hide-loadingpanel.html
Give this a try and let me know if it makes any difference.


Regards,
Maria Ilieva
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.
0
Charles
Top achievements
Rank 1
answered on 01 Jun 2012, 01:30 PM
Could you please explain how to do this in the Master Page? I keep getting an error on the server block testing the event target saying the control 'txtSearchFilter' doesn't exist in the current context:

Compilation Error 
Description: An error occurred during the compilation of a resource required to service this request. Please review the following specific error details and modify your source code appropriately. 
  
Compiler Error Message: CS0103: The name 'txtSearchFilter' does not exist in the current context
  
Source Error:
  
   
  
Line 27:                 searchInProgress = true;
Line 28:                 try {
Line 29:                     if (args.get_eventTarget() == "<%= txtSearchFilter.UniqueID %>") {
Line 30:                         currentLoadingPanel = $find("<%= radLoadingPanel1.ClientID %>");
Line 31:                         currentUpdatedControl = $find("<%= lstBxAvailableItems %>");
  


Here's my javascript from my Master Page:

<telerik:RadCodeBlock ID="radCodeBlockMaster" runat="server">
    <script language="javascript" type="text/javascript">
        var searchInProgress = false;
        var currentLoadingPanel = null;
        var currentUpdatedControl = null;
        function OnAjaxRequestStart(sender, args) {
            searchInProgress = true;
            if (args.get_eventTarget() == "<%= txtSearchFilter.UniqueID %>") {
                currentLoadingPanel = $find("<%= radLoadingPanel1.ClientID %>");
                currentUpdatedControl = $find("<%= lstBxAvailableItems %>");
                if (currentUpdatedControl && currentLoadingPanel) {
                    currentLoadingPanel.show(currentUpdatedControl);
                }
            }
            else {
            }
        }
        function OnAjaxResponseEnd(sender, args) {
            searchInProgress = false;
            if (currentLoadingPanel && currentUpdatedControl) {
                currentLoadingPanel.hide(currentUpdatedControl);
            }
            currentLoadingPanel = null;
            currentUpdatedControl = null;
        }
    </script>
</telerik:RadCodeBlock>

Also, what's the best way to do this for multiple updated controls if we can actually get this to work.

I've tried to show and hide them explicitly on the client events in the web user control containing the target and updated controls, but as I stated in my original message, they show up on the first step of the asp.net wizard control, but not the subsequent steps.

Note: I'm not trying to ajaxify the entire wizard control as I understand it is a non-supported control, but on web user controls inside the wizard control should not be a problem, should they?

Not having the loading panel show up over these controls is causing issues when the users start clicking on items in the listboxes before the ajax requests in progress have completed.

Thanks,

Charlie

0
Charles
Top achievements
Rank 1
answered on 01 Jun 2012, 02:56 PM
Ok, problem solved by showing the panel explicitly, but assigning the values inside the web user controls containing the actual controls identified in the server blocks. If the values of the variables are null, it doesn't do anything, but if they are populated, the panels show as expected.

Thanks,

Charlie
Tags
Ajax
Asked by
Charles
Top achievements
Rank 1
Answers by
Maria Ilieva
Telerik team
Charles
Top achievements
Rank 1
Share this question
or