I have a master page with a table. The table contains four cells. The top left cell contains a RadPanelBar, the top right cell contains the content, the bottem left cell is empty, and the bottom right cell contains navigation buttons. I have an update panel and a loading panel on the master form. I'm trying to get the loading panel to be semi transparent over the bottom right cell only. The transparency is working, but it covers the entire page. I've attached the master page, and the css for the loading grid.
| <%@ Master Language="VB" AutoEventWireup="false" CodeBehind="Main.master.vb" Inherits="MassMemberMoveUI.Main" %> |
| <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> |
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
| <html xmlns="http://www.w3.org/1999/xhtml"> |
| <head runat="server"> |
| <title></title> |
| <asp:ContentPlaceHolder ID="head" runat="server"> |
| </asp:ContentPlaceHolder> |
| <link href="Main.css" rel="stylesheet" type="text/css" /> |
| <link href="MySkin/ComboBox.MySkin.css" rel="stylesheet" type="text/css" /> |
| <link href="MySkin/Grid.MySkin.css" rel="Stylesheet" type="text/css" /> |
| <link href="MySkin/Ajax.MySkin.css" rel="Stylesheet" type="text/css" /> |
| <style type="text/css"> |
| .style1 |
| { |
| width: 173px; |
| } |
| </style> |
| </head> |
| <body> |
| <form id="MasterForm" runat="server"> |
| <telerik:RadScriptManager ID="RadScriptManager1" runat="server"> |
| </telerik:RadScriptManager> |
| <div id="container"> |
| <div id="header"> |
| <h1> |
| Mass Member Move</h1> |
| </div> |
| <div id="sub_header"> |
| ... QNXT Eligibility Transfers</div> |
| <div id="main_content_top"> |
| </div> |
| <div id="main_content"> |
| <div class="content"> |
| <telerik:RadAjaxPanel runat="server" ID="MainAjaxPanel" LoadingPanelID="MainLoadingPanel"> |
| <table width="700px"> |
| <tr> |
| <td class="style1"> |
| <div style="position: absolute; width: 162px; height: 400px; z-index: 101; background-color: White; |
| filter: alpha(opacity=0); -moz-opacity: 0.0; opacity: 0.0;"> |
| </div> |
| <telerik:RadPanelBar ID="ProgressPanelBar" runat="server" Width="162px" Height="400px" |
| DataSourceID="SiteMapDataSource1"> |
| </telerik:RadPanelBar> |
| <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" /> |
| </td> |
| <td> |
| <div style="height: 400px; border: solid 1px black;"> |
| <asp:ContentPlaceHolder ID="contentplaceholder1" runat="server"> |
| </asp:ContentPlaceHolder> |
| </div> |
| </td> |
| </tr> |
| <tr> |
| <td class="style1"> |
| </td> |
| <td> |
| <telerik:RadAjaxLoadingPanel ID="MainLoadingPanel" runat="server" IsSticky="true" |
| EnableEmbeddedSkins="false" Skin="MySkin"> |
| </telerik:RadAjaxLoadingPanel> |
| <center> |
| <div style="height: 100px"> |
| <asp:ImageButton ID="PrevButton" runat="server" ImageUrl="~/Images/LeftArrow.bmp" |
| ToolTip="Previous Page" /> |
| <asp:ImageButton ID="NextButton" runat="server" ImageUrl="~/Images/RightArrow.bmp" |
| ToolTip="Next Page" /> |
| <p /> |
| <asp:Label ID="ErrorLabel" runat="server" Visible="false" ForeColor="Red"></asp:Label> |
| </div> |
| </center> |
| </td> |
| </tr> |
| </table> |
| </telerik:RadAjaxPanel> |
| </div> |
| </div> |
| </div> |
| </form> |
| </body> |
| </html> |
| /* Telerik RadAjaxLoadingPanel Default Skin */ |
| /* |
| <div style="position: absolute; left: 173px; top: 400px; width: 538px; height: 100px; |
| background-color: Gray; filter: alpha(opacity=60); -moz-opacity: 0.6; |
| opacity: 0.6;"> |
| </div> |
| */ |
| .RadAjax_MySkin .raDiv |
| { |
| /*background-image:url('Common/loading.gif');*/ |
| position: absolute; |
| left: 173px; |
| top: 400px; |
| width: 538px; |
| height: 100px; |
| } |
| .RadAjax_MySkin .raColor |
| { |
| background-color:#fff; |
| } |
| .RadAjax_MySkin .raTransp |
| { |
| opacity:0.6; |
| -moz-opacity:0.6; |
| filter:alpha(opacity=60); |
| } |
12 Answers, 1 is accepted
0
Hi Bill,
You can set the IsSticky property of the RadAjaxLoadingPanel to true and it will appear where you have set it in the WebForm. You can find more information here.
And for additional solutions for positioning the RadAjaxLoadingPanel on the page, you can check the below articles:
http://www.telerik.com/help/aspnet-ajax/ajxshowloadingpanelnexttoajaxinitiator.html
http://www.telerik.com/help/aspnet-ajax/ajxcenterloadingpanel.html
All the best,
Pavlina
the Telerik team
You can set the IsSticky property of the RadAjaxLoadingPanel to true and it will appear where you have set it in the WebForm. You can find more information here.
And for additional solutions for positioning the RadAjaxLoadingPanel on the page, you can check the below articles:
http://www.telerik.com/help/aspnet-ajax/ajxshowloadingpanelnexttoajaxinitiator.html
http://www.telerik.com/help/aspnet-ajax/ajxcenterloadingpanel.html
All the best,
Pavlina
the Telerik team
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 Public Issue Tracking system and vote to affect the priority of the items
0
bill
Top achievements
Rank 1
Rank 1
answered on 30 Jun 2010, 04:38 PM
I have the IsSticky property set to true.
0
Hello Bill,
Please review this help topic on how you could show/hide RadAjaxLoadingPanel explicitly and try it in your case.
Let me know if you find any difficulties or any issues arise.
Regards,
Pavlina
the Telerik team
Please review this help topic on how you could show/hide RadAjaxLoadingPanel explicitly and try it in your case.
Let me know if you find any difficulties or any issues arise.
Regards,
Pavlina
the Telerik team
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 Public Issue Tracking system and vote to affect the priority of the items
0
bill
Top achievements
Rank 1
Rank 1
answered on 01 Jul 2010, 06:08 PM
Currently I'm using a RadAjaxPanel on the master page so I don't have to explicity write all the ajax wiring required by the radajaxmanager. Is there a way to explitly show the update panel, with out using a ajax manager?
0
Hi bill,
To achieve the desired functionality using RadAjaxPanel instead of RadAjaxManager, you need to handle on OnRequestStart / OnResponseEnd client side events of RadAjaxPanel and follow the instructions from the help topic which was linked to the previous post.
Regards,
Pavlina
the Telerik team
To achieve the desired functionality using RadAjaxPanel instead of RadAjaxManager, you need to handle on OnRequestStart / OnResponseEnd client side events of RadAjaxPanel and follow the instructions from the help topic which was linked to the previous post.
Regards,
Pavlina
the Telerik team
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 Public Issue Tracking system and vote to affect the priority of the items
0
bill
Top achievements
Rank 1
Rank 1
answered on 06 Jul 2010, 04:38 PM
I added the OnRequestStart and OnResponseEnd event handlers to the RadAjaxPanel (intellisense didn't find them). After adding them, it doesn't appear the events are firing. I added an alert box in the RequestStart method to determine if the method was being called, and the alert box never pops up.
0
Hello Bill,
Could you please send us a runnable sample illustrating your scenario and the issues you are facing? You can try opening a formal support ticket where you can attach the project files. I could then debug it locally and find a proper resolution for you. Otherwise it would hard to determine the source of the problem based on the provided information.
Regards,
Pavlina
the Telerik team
Could you please send us a runnable sample illustrating your scenario and the issues you are facing? You can try opening a formal support ticket where you can attach the project files. I could then debug it locally and find a proper resolution for you. Otherwise it would hard to determine the source of the problem based on the provided information.
Regards,
Pavlina
the Telerik team
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 Public Issue Tracking system and vote to affect the priority of the items
0
bill
Top achievements
Rank 1
Rank 1
answered on 06 Jul 2010, 06:00 PM
I created an example, and tried to submit a support ticket, but I recieve an error indicating my support package is not active. If there is another way to send you my project, I can do that, otherwise I can post all the code.
0
Hi Bill,
You can try to upload the project on public site and send us the transfer link.
Greetings,
Pavlina
the Telerik team
You can try to upload the project on public site and send us the transfer link.
Greetings,
Pavlina
the Telerik team
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 Public Issue Tracking system and vote to affect the priority of the items
0
bill
Top achievements
Rank 1
Rank 1
answered on 14 Jul 2010, 09:51 PM
Here you go, thanks for the help. http://www.mediafire.com/file/mjyntmyjyyy4mwh/TelerikSample.zip
0
Accepted
Hello Bill,
Attached to this message is a modified project which hanldes the desired functionality. Please give it a try and let me know if it works as expected or if I am leaving something out.
Greetings,
Pavlina
the Telerik team
Attached to this message is a modified project which hanldes the desired functionality. Please give it a try and let me know if it works as expected or if I am leaving something out.
Greetings,
Pavlina
the Telerik team
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 Public Issue Tracking system and vote to affect the priority of the items
0
bill
Top achievements
Rank 1
Rank 1
answered on 09 Aug 2010, 11:41 PM
Worked like a charm, thanks for your help.