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

LoadingPanel not showing on first postback with button enabled client-side

4 Answers 321 Views

Ajax

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

Rob asked on 28 Jul 2008, 03:47 PM

I'm getting some strange behaviour with a LoadingPanel showing only after the second and subsequent postbacks.

The ASP:Button control that initiates the request is on a content page and is under the management of a RadAjaxManagerProxy.

I'm pretty certain that the problem relates to the initial enabled/disabled state of the button. The button is enabled only when the user selects a value from a dropdown list.

I had originally set the button's Enabled property to False at design time and then enabled the button client-side at runtime. This resulted in the button not working at all. So I now leave the button enabled at design time and then disable it in Javascript in the window load event at runtime. Then, when the user makes his dropdown selection, the button is re-enabled (again in Javascript).

Functionally, everything works fine with the button - it runs my query and the results are asynchronously shown in my grid.

The problem is that the LoadingPanel only shows on the second and subsequent runs of the query (i.e. second and subsequent clicks of the button). It doesn't show when you run the query after the page first loads so there is a long pause with no visual feedback before the query results are shown.

Any thoughts?

4 Answers, 1 is accepted

answered on 29 Jul 2008, 11:09 AM

Telerik must have the most responsive support team in the industry - I'm always impressed at how quickly you reply! Thank you for that.

Ok, here's the relevant code..

First, the ASP Button control that runs the query is declared as follows:

    
            <asp:Button ID="btnProcessReport"   
        
            runat="server"   
        
            Text="Process Report"   
        
            Height="25px"   
        
            Width="105px"   
        
            OnClick="btnProcessReport_Click"    
        
            meta:resourcekey="btnViewReportResource1"   
        
            CssClass="CCMSButton" />

Note that the button is enabled at design time.

Then a Javascript event handler is added to the window load event to disable the button at runtime prior to the use making a selection from the relevant dropdown list control:

    
            Sys.UI.DomEvent.addHandler(window, "load", DisableProcessReportButton);  
        
            function DisableProcessReportButton()  
        
            {  
        
                var btnProcessReport = document.forms[0].ctl00_contentBody_btnProcessReport;  
        
                btnProcessReport.disabled = true;  
        
            }

The button is then enabled client-side when the user makes a selection from a dropdown list:

    
            var btnProcessReport = document.forms[0].ctl00_contentBody_btnProcessReport;  
        
            btnProcessReport.disabled = false;  
        
            btnProcessReport.removeAttribute('disabled');

When the button is clicked it runs a query and binds a RadGrid to the results of that query.

The RadGrid is under the management of a RadAjaxManagerProxy control which references the RadAjaxLoadingPanel. Here is the declaration for the Ajax Manager and the Loading Panel:

    
            <telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxy1" runat="server">  
        
               <AjaxSettings> 
        
                   <telerik:AjaxSetting AjaxControlID="btnProcessReport">  
        
                       <UpdatedControls> 
        
                           <telerik:AjaxUpdatedControl ControlID="lblMsgData" /> 
        
                           <telerik:AjaxUpdatedControl ControlID="btnExpToExcel" /> 
        
                           <telerik:AjaxUpdatedControl ControlID="rgvMajor"   
        
                               LoadingPanelID="RadAjaxLoadingPanel1" /> 
        
                       </UpdatedControls> 
        
                   </telerik:AjaxSetting> 
        
                   <telerik:AjaxSetting AjaxControlID="btnExpToExcel">  
        
                       <updatedcontrols> 
        
                           <telerik:AjaxUpdatedControl ControlID="rgvMajor" /> 
        
                       </updatedcontrols> 
        
                   </telerik:AjaxSetting> 
        
               </AjaxSettings> 
        
            </telerik:RadAjaxManagerProxy> 
        
            <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" Runat="server" height="75px" width="75px">  
        
               <img alt="Loading..."   
        
                    src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading3.gif") %>'   
        
                    style="border:0px;" /> 
        
            </telerik:RadAjaxLoadingPanel>

With regards to your suggestion that I hide the button with Display:None rather than using the Visibility property - I'm not hiding it at the moment, I'm disabling it.

Do you think its enabled/disabled status is affecting the Loading Panel's visibility when running the first time?