RadButton OnClientClicked event temporarily disables explicit call to show AjaxLoadingPanel

[Justin]

A basic C# ASP.net page has a single RadGrid on a page. A RadButton with ​Auto​PostBack=false has an OnClientClicked client-side handler function assigned. This function does some long operations, so I would like to show the AjaxLoadingPanel while the browser is busy, even though there isn't any actual Ajax retrievalgoing on. But it seems as if the OnClientClicked event somehow disables or defers the call to the show method of the AjaxLoadingPanel. The panel and spinner does show up, but only after the long client-side operations are complete. Is this by design? Is there an easy work-around?

A demo ASP setup:

<form id="form1" runat="server">
  <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
  <div>
      <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default"></telerik:RadAjaxLoadingPanel>


      <telerik:RadButton ID="RadButton1" runat="server" AutoPostBack="false" Text="Turn Loading Panel on" OnClientClicked="click_handler"></telerik:RadButton>
      <telerik:RadGrid ID="RadGrid1" runat="server" DataSourceID="demoinfo">
          <MasterTableView>
              <Columns></Columns>
          </MasterTableView>
      </telerik:RadGrid>
      <asp:XmlDataSource runat="server" ID="demoinfo" datafile="demoinfo.xml"/>
  </div>
  <p id="bar" style="background-color:black; display:inline; width:1px;">.</p>
</form>
<script>
      function click_handler() {
          loaderOn();
          superslow();
          //loaderOff();
      }

      function superslow() { //just a bunch of uselessness to simulate slow operations
          var imax = 100000;
          for (var i = 0 ; i < imax; i++) {
              var noid = $find(i.toString().trim() + "id");
              var barel = document.getElementById("bar");
              barel.style.width = Math.floor(i * (imax / 10)).toString() + "px";
              if (i % 10000 == 0) {
                  console.log("ten thousand more...");
              }
          }
      }

      function loaderOn() {
          lp = $find("RadAjaxLoadingPanel1")
          lp.show("RadGrid1");
      }

      function loaderOff() {
          lp = $find("RadAjaxLoadingPanel1")
          lp.hide("RadGrid1");
      }

</script>

Thanks for your help,

Justin

[Atif]

have you used AjaxManager?I think you shoudl remove autopostback=false and if u only want to update grid on click event then keep grid in a panel and update  that panel too on button click.

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
                <ClientEvents OnRequestStart="RequestStart" OnResponseEnd="ResponseEnd" />
                <AjaxSettings>

              <telerik:AjaxSetting AjaxControlID="RadButton1">
                        <UpdatedControls>
                           <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
                         </UpdatedControls>
                    </telerik:AjaxSetting>
                </AjaxSettings>
            </telerik:RadAjaxManager>

[Maria Ilieva]

Hello,

I tried to replicate the described issue locally but the presented code works properly on my end. Find attached my test application and verify what the difference in your case is.

Regards,
Maria Ilieva
Telerik

[Justin]

Atif -

  Thanks for the suggestion. I should have specified this is a batch-edit mode radgrid, and I do not wish to have the button post back, but instead it initiates long-running client-side script to do stuff like validate the radgrid contents or modify values in the radgrid or select certain rows in radgrid. Eventually user would click a different button to submit the batch of changes.

-Justin

[Justin]

Maria -

Thanks for the reply. I am still unable to see the waiting spinner loading panel during the long running client-side function. I tried this in IE9, IE10, and chrome canary. I sometimes see the spinner appear briefly after the superslow function is finished. Maybe my "superslow" function wasn't superslow enough to be a good illustration. I made small modification to the project to stretch that out. Here is a screen capture from my workstation:

http://imagebin.ca/v/2IxJagd0a8mP

 Interestingly, in chrome canary, after the long run is complete, the panel shows up briefly, maybe two seconds and then hides. But again, not until after the long run is finished.

- Justin

[Maria Ilieva]

Hello Justin,

As we are not able to replicate the problem on our end It will be best if you can open a regular support ticket and send us sample runnable version of your application that demonstrates the problem. Thus we will be able to debug it locally and do our best to isolate the root cause of the issue.

Regards,
Maria Ilieva
Telerik