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

Modal RadWindow not shown in center of viewing brower window

4 Answers 223 Views
Window
This is a migrated thread and some comments may be shown as answers.
Andrew Zhao
Top achievements
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">  
            <class="transmodhelpx"><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

Sort by
0
Shinu
Top achievements
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:
 
    function showWindow() { 
        var oWin = $find("<%= DetailWindow.ClientID %>"); 
        oWin.show();         
        oWin.moveTo(200, 200); 
    } 


-Shinu.
0
Georgi Tunev
Telerik team
answered on 22 Jun 2010, 12:37 PM
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
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
answered on 22 Jun 2010, 05:03 PM
I submitted a support ticket.
Your ticket ID is : 321201
0
Georgi Tunev
Telerik team
answered on 23 Jun 2010, 08:51 AM
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.
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
Tags
Window
Asked by
Andrew Zhao
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 2
Georgi Tunev
Telerik team
Andrew Zhao
Top achievements
Rank 1
Share this question
or