Andrew Zhao
Top achievements
Rank 1
Rank 1
Andrew Zhao
asked on 21 Jun 2010, 09:00 PM
RadGrid in web page has hyperlink command column, clicking the link to show a modal RadWindow by Javascript. The popup window needs to be shown in the center of current viewing window. However, if the RadGrid has more 50 rows, the page becomes large, browser shows the veritical scrollbar. Scrolling to the end of page and click on the last hyperlink to show RadWindow. Now, the browser moving to the top of the page and the popup window is shown on top, then browser is moving down to the bottom. You can only see the partial popup window, because its position is too high. How to display modal RadWindow right in the center of current viewing window instead of top center of page?
Here is the code snippet.
| function OpenDetailWindow() { |
| var oWin = $find("<%= DetailWindow.ClientID %>"); |
| oWin.show(); |
| } |
| <telerik:RadWindow |
| id="DetailWindow" |
| runat="server" |
| Modal="true" |
| Width="780px" |
| Height="580px" |
| Skin="NonTrans" |
| Behaviors="None" |
| InitialBehaviors="None" |
| VisibleStatusbar="false" |
| VisibleTitlebar="false" |
| ViewStateMode="Enabled" |
| KeepInScreenBounds="true" |
| EnableEmbeddedSkins="false" |
| EnableEmbeddedBaseStylesheet="false"> |
| <ContentTemplate> |
| <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" EnableAJAX="true"> |
| <div class="transmodtop"> |
| <p class="transmodhelpx"><a href="#"><img alt="Close" onclick="javascript:CloseDetailWindow();" src="../images/help_x.gif" /></a></p> |
| </div> |
| <div class="transmodbg"> |
| <div class="transmodcontent"> |
| <uc:TransactionDetail ID="transDetail" runat="server"></uc:TransactionDetail> |
| <div class="transmodrule"></div> |
| <div class="transmodbut"><asp:HyperLink ID="CloseDetailWinLink" runat="server" NavigateUrl="javascript:CloseDetailWindow();" CssClass="blu_button"></asp:HyperLink></div> |
| </div> |
| </div> |
| </telerik:RadAjaxPanel> |
| </ContentTemplate> |
| </telerik:RadWindow> |
4 Answers, 1 is accepted
0
Shinu
Top achievements
Rank 2
Rank 2
answered on 22 Jun 2010, 08:52 AM
Hi Andrew,
Its working as expected when I tried on my end. The RadWindow shows in the center of viewable area of browser.
From your code I can see that you are using custom skin for your RadWindow. Did you set any Top/Left property for the window from css, that causes undesired appearance?
Otherwise, you can try moveTo() method to set the location of RadWindow as shown below.
client code:
-Shinu.
Its working as expected when I tried on my end. The RadWindow shows in the center of viewable area of browser.
From your code I can see that you are using custom skin for your RadWindow. Did you set any Top/Left property for the window from css, that causes undesired appearance?
Otherwise, you can try moveTo() method to set the location of RadWindow as shown below.
client code:
| function showWindow() { |
| var oWin = $find("<%= DetailWindow.ClientID %>"); |
| oWin.show(); |
| oWin.moveTo(200, 200); |
| } |
-Shinu.
0
Hi Andrew,
Please make sure that your page is using XHTML-compliant DocType
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
If you are using such DocType and the problem still exists, please open a support ticket and send us a small sample project that reproduces the problem so we can get a better view over your exact setup and logic.
Greetings,
Georgi Tunev
the Telerik team
Please make sure that your page is using XHTML-compliant DocType
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
If you are using such DocType and the problem still exists, please open a support ticket and send us a small sample project that reproduces the problem so we can get a better view over your exact setup and logic.
Greetings,
Georgi Tunev
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
Andrew Zhao
Top achievements
Rank 1
Rank 1
answered on 22 Jun 2010, 05:03 PM
I submitted a support ticket.
Your ticket ID is : 321201
Your ticket ID is : 321201
0
Hi Andrew,
Thank you very much for the ticket - I checked the project and found the reason for this behavior.
In your code, you set the href attribute of the link to "#". This, however, will force the page to jump to top and a "#" will be added to the query string - that is the reason for the problem. If you replace "#" with javascript:void(0); in your code, it will work as expected.
i.e.
Best wishes,
Georgi Tunev
the Telerik team
Thank you very much for the ticket - I checked the project and found the reason for this behavior.
In your code, you set the href attribute of the link to "#". This, however, will force the page to jump to top and a "#" will be added to the query string - that is the reason for the problem. If you replace "#" with javascript:void(0); in your code, it will work as expected.
i.e.
protected void RadGrid1_ItemCreated( object sender, GridItemEventArgs e ){ if ( e.Item is GridDataItem ) { GridDataItem item = ( GridDataItem )e.Item; HyperLink link = ( HyperLink )item[ "ProductName" ].Controls[ 0 ]; link.Attributes[ "href" ] = "javascript:void(0);"; link.Attributes[ "onclick" ] = string.Format( "return ShowDetailWindow('{0}','{1}');", e.Item.ItemIndex, e.Item.OwnerTableView.DataKeyValues[ e.Item.ItemIndex ][ "ProductID" ] ); }}Best wishes,
Georgi Tunev
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