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 249 Views
Ajax
This is a migrated thread and some comments may be shown as answers.
Rob
Top achievements
Rank 1
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

Sort by
0
Maria Ilieva
Telerik team
answered on 29 Jul 2008, 10:49 AM
Hi Rob,

Could you please paste part of your code so we could further research on the issue you are facing. Also, please try to change the button status by using display:none instead of visible property.

Kind regards,
Maria Ilieva
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Rob
Top achievements
Rank 1
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?
0
Maria Ilieva
Telerik team
answered on 30 Jul 2008, 10:43 AM
Hello Rob,

Excuse my previous suggestion for setting the Button's visibility.

Could you please try to set the btnProcessReport  as updated control in the RadAjaxManager settings. Also please note that the exporting feature of the control work with regular postbacks only.

Best wishes,
Maria Ilieva
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Rob
Top achievements
Rank 1
answered on 30 Jul 2008, 02:22 PM
Ok, I found the problem.

There was a rogue line of code in the page that had set the grid's visibility to false on page load. This meant that while the first query was running the grid was still not visible, hence the loading panel not being visible either. Once the query had completed the grid was being made visible and then left that way so on subsequent runs of the query the loading panel would then show.

Typical - one line of code caused all the problems.

Thank you for your input Maria. It got me thinking along the right lines.

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