Add Button Near The Spinning RadAjaxLoadingPanel

[Daniel]

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.

[Maria Ilieva]

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

 

 

[Daniel]

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.

[Maria Ilieva]

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