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

Add Button Near The Spinning RadAjaxLoadingPanel

3 Answers 33 Views
Ajax
This is a migrated thread and some comments may be shown as answers.
Daniel
Top achievements
Rank 1
Daniel asked on 01 Oct 2014, 12:45 PM
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.

3 Answers, 1 is accepted

Sort by
0
Maria Ilieva
Telerik team
answered on 03 Oct 2014, 11:13 AM
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.

 
0
Daniel
Top achievements
Rank 1
answered on 20 Oct 2014, 09:50 AM
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.

0
Maria Ilieva
Telerik team
answered on 22 Oct 2014, 09:09 AM
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.

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