RadAjaxLoadingPanel not showing up correctly

[Charles]

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

[Maria Ilieva]

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

[Charles]

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

[Charles]

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