RadButton OnClientClicked event temporarily disables explicit call to show AjaxLoadingPanel

6 posts, 0 answers
  1. Justin
    Justin avatar
    7 posts
    Member since:
    Oct 2014

    Posted 08 Oct 2015 Link to this post

    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

  2. Atif
    Atif avatar
    18 posts
    Member since:
    Jul 2015

    Posted 10 Oct 2015 in reply to Justin Link to this post

    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>
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 12 Oct 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  5. Justin
    Justin avatar
    7 posts
    Member since:
    Oct 2014

    Posted 13 Oct 2015 in reply to Atif Link to this post

    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

  6. Justin
    Justin avatar
    7 posts
    Member since:
    Oct 2014

    Posted 13 Oct 2015 in reply to Maria Ilieva Link to this post

    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

  7. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 15 Oct 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017