Add Button Near The Spinning RadAjaxLoadingPanel

4 posts, 0 answers
  1. Daniel
    Daniel avatar
    159 posts
    Member since:
    Feb 2014

    Posted 01 Oct 2014 Link to this post

    Hello,

    I am working on a project with RadGrid and RadAjaxLoadingPanel.

    When the user clicks on a button, the RadGrid gets updated.
    The project requirements are that after the user clicks on the button and the spinning RadAjaxLoadingPanel icon shows, another button will appear
    next to the spinning RadAjaxLoadingPanel icon. When the operation of the RadAjaxLoadingPanel ends, the button (near the RadAjaxLoadingPanel) will disappear.

    Is it possible? If yes, I'd glad to get a solution.

    Thanks,
    Daniel.
  2. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 03 Oct 2014 Link to this post

    Hi Daniel,

    You could simply add a button in the RadAjaxLoadingPanel like this:
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="" Transparency="30">
           <div class="loading">
               <asp:Button ID="Btn1" runat="server" Text="loading">
               </asp:Button>
           </div>
       </telerik:RadAjaxLoadingPanel>

    I hope this helps.

    Regards,
    Maria Ilieva
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Daniel
    Daniel avatar
    159 posts
    Member since:
    Feb 2014

    Posted 20 Oct 2014 in reply to Maria Ilieva Link to this post

    Hi Maria Ilieva,

    Thank you for your response.

    But the button inside the RadAjaxLoadingPanel1 was not clickable while the AjaxLoading panel is spinning.

    So I solved it in a different way:

    I added a button elsewhere in my project, and I defined the css and js as follows:

    CSS:
    .btn_Cancel {
                z-index: 999999!important;
                bottom: -770px;
            }

    JS:
    function OnReportLoading_Hiding(sender, eventArgs) {
     var b = $get("<%= btn_Cancel.ClientID%>").style;
    b.display = "none";
    }
     
     
    function OnReportLoading_Showing(sender, eventArgs) {
     centerElementOnScreen($get("<%= RadAjaxLoadingPanel1.ClientID %>"));
    }
      
     
    function centerElementOnScreen(element) {
     var grd = $get("<%= CType(MainContentPlaceHolder.FindControl("RadGrid1"), RadGrid).ClientID%>");
      var scrollTop = grd.scrollTop;
     var scrollLeft = grd.scrollLeft;
    var viewPortHeight = grd.clientHeight;
     var viewPortWidth = grd.clientWidth;
     if (document.compatMode == "CSS1Compat") {
                        viewPortHeight = grd.clientHeight;
                         viewPortWidth = grd.clientWidth;
                          if (!$telerik.isSafari) {
                                        scrollTop = grd.scrollTop;
                                         scrollLeft = grd.scrollLeft;
                           }
      }
       var topOffset = Math.ceil(viewPortHeight / 2 - element.offsetHeight / 2);
      var leftOffset = Math.ceil(viewPortWidth / 2 - element.offsetWidth / 2);
      var top = scrollTop + topOffset + 93;
     var left = scrollLeft + leftOffset + 28;
     var b = $get("<%= btn_Cancel.ClientID%>").style;
     b.display = "block";
    b.position = "absolute";
    b.left = left + "px";
     b.top = top + "px";
     }

    ASPX:
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default" OnClientHiding="OnReportLoading_Hiding" OnClientShowing="OnReportLoading_Showing">
            </telerik:RadAjaxLoadingPanel>
     
    <telerik:RadButton ID="btn_Cancel" runat="server" ToolTip="cancel" CssClass="btn_Cancel" Text="X" ForeColor="Red" Font-Bold="true">
    </telerik:RadButton>

    Regards,
    Daniel.

  5. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 22 Oct 2014 Link to this post

    Hi Daniel,

    Thank you for sharing your solution into the forum thread. I'm sure it will be of a big help for other users who has the same requirements.

    Regards,
    Maria Ilieva
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top