Modal RadWindow not shown in center of viewing brower window

5 posts, 0 answers
  1. Andrew Zhao
    Andrew Zhao avatar
    11 posts
    Member since:
    Mar 2010

    Posted 21 Jun 2010 Link to this post

    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> 
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 22 Jun 2010 Link to this post

    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.
  3. Georgi Tunev
    Admin
    Georgi Tunev avatar
    7207 posts

    Posted 22 Jun 2010 Link to this post

    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
  4. Andrew Zhao
    Andrew Zhao avatar
    11 posts
    Member since:
    Mar 2010

    Posted 22 Jun 2010 Link to this post

    I submitted a support ticket.
    Your ticket ID is : 321201
  5. Georgi Tunev
    Admin
    Georgi Tunev avatar
    7207 posts

    Posted 23 Jun 2010 Link to this post

    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
Back to Top