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

Error in centering RadWinow from sharpoint Web Part

2 Answers 88 Views
Window
This is a migrated thread and some comments may be shown as answers.
Igor
Top achievements
Rank 1
Igor asked on 16 Feb 2009, 02:32 PM
When I open a RadWindow from within a SharePoint web part (wss 3.0 or SharePoint 2007) and want to have it centered on the browser screen (default behavior), the window is not centered when the bowser has scroll bars and the screen position is scrolled (either vertically or horizontally). When the browser has no scroll bars or the scroll bars are at the top (vertical) and left (horizontal) position however, the window is centered as expected.

When I execute the same code from within a ASP.NET page (not using SharePoint), everything works as expected (scrolled as well as non scrolled). I use the RadAjax 2008 Q2 version of the controls and IE6 or IE7.

This behavior can be simulated using the code below:

Web part (WebPartRadWindow.cs file) :

 

 

using System;  
using System.Runtime.InteropServices;  
using System.Web.UI;  
using System.Web.UI.WebControls.WebParts;  
using System.Xml.Serialization;  
 
using Microsoft.SharePoint;  
using Microsoft.SharePoint.WebControls;  
using Microsoft.SharePoint.WebPartPages;  
using System.Web.UI.WebControls;  
using Telerik.Web.UI;  
 
namespace WebPartRadWindow  
{  
    [Guid("0fb0a390-4eb4-48ec-9d58-ff546c4f8928")]  
    public class WebPartRadWindow : System.Web.UI.WebControls.WebParts.WebPart  
    {  
        public WebPartRadWindow()  
        {  
            this.ExportMode = WebPartExportMode.All;  
        }  
 
        protected override void OnInit(EventArgs e)  
        {  
            base.OnInit(e);  
 
            AddScriptManager();  
            AddRadWindowManager();  
        }  
 
        protected override void OnLoad(EventArgs e)  
        {  
            base.OnLoad(e);  
 
            AddOpenRadWindowScript();  
        }  
 
 
        protected override void Render(HtmlTextWriter writer)  
        {  
            writer.Write("RadWindow postion test");  
 
            for (int i = 0; i < 30; i++)  
            {  
                writer.WriteBreak();  
            }  
 
            writer.Write("<button onclick='OpenRadWindow();return false;' class='Button'>Open window</button>");  
        }  
 
        private void AddScriptManager()  
        {  
            if (ScriptManager.GetCurrent(Page) == null)  
                Page.Form.Controls.AddAt(0, new ScriptManager());  
        }  
 
        private void AddRadWindowManager()  
        {  
            RadWindowManager windowManager = new RadWindowManager();  
            windowManager.ID = "RadWindowManager1";  
            windowManager.DestroyOnClose = true;  
 
            Page.Form.Controls.Add(windowManager);  
        }  
 
        private void AddOpenRadWindowScript()  
        {  
            ScriptManager.RegisterStartupScript( this, GetType(), "OpenRadWindow" 
                                               , "function OpenRadWindow()" 
                                               + "{" 
                                               + "    var oWindow = GetRadWindowManager().getWindowByName('TestWindow');" 
                                               + "    if (oWindow != null)" 
                                               + "        oWindow.close();" 
                                               + "    oWindow = radopen('http://www.telerik.com', 'TestWindow');" 
                                               //+ "    oWindow.moveTo(0, 0);"  
                                               + "}" 
                                               , true);  
        }  
    }  
}  
 


ASPX page (default.aspx.cs file)
using System;  
using System.Data;  
using System.Configuration;  
using System.Web;  
using System.Web.Security;  
using System.Web.UI;  
using System.Web.UI.WebControls;  
using System.Web.UI.WebControls.WebParts;  
using System.Web.UI.HtmlControls;  
 
using Telerik.Web.UI;  
 
public partial class _Default : System.Web.UI.Page   
{  
    protected override void  OnInit(EventArgs e)  
    {  
         base.OnInit(e);  
 
        AddScriptManager();  
        AddRadWindowManager();  
    }  
 
    protected override void OnLoad(EventArgs e)  
    {  
        base.OnLoad(e);  
        AddOpenRadWindowScript();  
    }  
 
    protected override void Render(HtmlTextWriter writer)  
    {  
        base.Render(writer);  
 
        writer.Write("RadWindow postion test");  
 
        for (int i = 0; i < 30; i++)  
        {  
            writer.WriteBreak();  
        }  
 
        writer.Write("<button onclick='OpenRadWindow();return false;' class='Button'>Open window</button>");  
    }  
 
 
    private void AddScriptManager()  
    {  
        if (ScriptManager.GetCurrent(Page) == null)  
            Page.Form.Controls.AddAt(0, new ScriptManager());  
    }  
 
    private void AddRadWindowManager()  
    {  
        RadWindowManager windowManager = new RadWindowManager();  
        windowManager.ID = "RadWindowManager1";  
        windowManager.DestroyOnClose = true;  
 
        Page.Form.Controls.Add(windowManager);  
    }  
 
    private void AddOpenRadWindowScript()  
    {  
        ScriptManager.RegisterStartupScript( this, GetType(), "OpenRadWindow" 
                                           , "function OpenRadWindow()" 
                                           + "{" 
                                           + "    var oWindow = GetRadWindowManager().getWindowByName('TestWindow');" 
                                           + "    if (oWindow != null)" 
                                           + "        oWindow.close();" 
                                           + "    oWindow = radopen('http://www.telerik.com', 'TestWindow');" 
                                           //+ "    oWindow.moveTo(0, 0);"  
                                           + "}" 
                                           , true);  
    }  
}  
 

Put the web part on a WSS 3.0 site, reduce the height of the browser window to get a vertical scoll bar, scroll down and click the "Open Window" button : the RadWindow is not centerd (displayed way to low). Do the same with the aspx page : the window is centered correctly.

I also noticed a different behaviour between SharePoint and ASP.NET page when positioning a RadWindow from within client code (moveTo function on window object in javascript):
  • When you position a RadWindow from an ASP.NET page the coordinates are relative to the HTML document : 0, 0 is the upper left point of the HTML document, even when the document is scrolled (in this case when executing a moveTo(0, 0) part or the whole of the RadWindow is off screen).
  • When you execute the same function from a web part the coordinates are relative to the screen (or viewport) not to the HTML document: 0, 0 is the upper left corner of the screen, if the document is scrolled, a moveTo(0, 0) results in a RadWindow that is positioned in the upper left corner of the screen and that is always visible even when the document is scrolled.

To see the difference in behavior, uncomment the oWindow.moveTo(0, 0) lines in the web part and the ASP.NET code. Probably the reason for the error in centering has the same origin as the positioning difference.

Is there any solution for having the RadWindow centered correctly in both web parts and ASP.NET pages and controls ? For web parts, I now calculate the top left postion of the window in order to have it centered in client code and use a moveTo, but this is sometimes a little bit awkward.

Kind regards,

Igor De Rycke

2 Answers, 1 is accepted

Sort by
0
Georgi Tunev
Telerik team
answered on 17 Feb 2009, 02:44 PM
Hello Igor,

Try removing the DocType declaration in your ASP.NET page - I believe that you will get the same problem there as well.
Note that RadControls for ASP.NET AJAX use the MS AJAX framework which uses XHTML DocType.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
They rely on it to properly position and resize themselves on the page. If you add such DocType to your MOSS pages, you should not experience this problem anymore.

P.S. I would also suggest to consider upgrading to the latest version of the controls - there we've made some changes in the logic of RadWindow / RadEditor so now they behave better in quirks mode.




Best wishes,
Georgi Tunev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
0
Igor
Top achievements
Rank 1
answered on 18 Feb 2009, 07:50 AM
Hi Georgi,

Thanks for your quick answer.

Indeed, when I  removed the <!DOCTYPE> line from the ASPX page, I observed the same postioning problem I saw in SharePoint.
Adding the <!DOCTYPE> line to the master page of the SharePoint site (a standard SharePoint Team Site), did the trick for the RadWindow: it now positions and centers as expected. However the layout of the rest of the page was messed up. It seems that the SharePoint aspx pages expect the <!DOCTYPE> not to be there.

Updgrading the controls to the latest version (Q3 2008_3_1314) also solved the problem, without having to add the <!DOCTYPE> to the master page and the layout staysOK.

Kind regards,

Igor De Rycke
Tags
Window
Asked by
Igor
Top achievements
Rank 1
Answers by
Georgi Tunev
Telerik team
Igor
Top achievements
Rank 1
Share this question
or