So, I've upgraded to the latest Telerik (2013_2_0611) to make use of RenderMode on RadWindows.
Previously, I'd gotten help with position the RadWindow here: http://www.telerik.com/community/forums/aspnet-ajax/window/radwindow-not-respecting-top-and-left.aspx - this was before the update.
After the update, I've discovered that if I set RenderMode=Lightweight, it seems to take the size of the window and add it to Top and Left, so I get windows that are ever moving. If AutoSize=True, it stays pretty much in the same area after a while... If I set it to False, it is ever going in a diagonal direction away from my button.
I've got a sample project to show what I mean, but I apparently can't attach it to a forum post, so here's the code. WebForm1.aspx works as I want, and WebForm2.aspx highlights the bad behavior. Is this expected behavior, or a known issue?
Previously, I'd gotten help with position the RadWindow here: http://www.telerik.com/community/forums/aspnet-ajax/window/radwindow-not-respecting-top-and-left.aspx - this was before the update.
After the update, I've discovered that if I set RenderMode=Lightweight, it seems to take the size of the window and add it to Top and Left, so I get windows that are ever moving. If AutoSize=True, it stays pretty much in the same area after a while... If I set it to False, it is ever going in a diagonal direction away from my button.
I've got a sample project to show what I mean, but I apparently can't attach it to a forum post, so here's the code. WebForm1.aspx works as I want, and WebForm2.aspx highlights the bad behavior. Is this expected behavior, or a known issue?
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm1.aspx.vb" Inherits="RadWindowHijinks.WebForm1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<%@ Register Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
Namespace="System.Web.UI" TagPrefix="asp" %>
<
html
xmlns
=
"http://www.w3.org/1999/xhtml"
>
<
head
runat
=
"server"
>
<
title
>Fun with RadWindows!</
title
>
<
telerik:RadScriptBlock
ID
=
"RadScriptBlock1"
runat
=
"server"
>
<
script
type
=
"text/javascript"
>
//Global Variables
var lastOpenedWindow;
function pageLoad() {
$addHandler(document, "click", onClickHandler);
}
function MenuOpenWindow(sender, eventArgs) {
var oWindow;
//Closes the last window opened
if (lastOpenedWindow) {
lastOpenedWindow.close();
lastOpenedWindow = null;
}
if (eventArgs.get_item().get_value() == "EmpProj") {
oWindow = $find("<%=winEmpProj.ClientID%>");
oWindow.show();
if (oWindow.get_offsetElementID()) {
offsetElementBounds = $telerik.getBounds($get(oWindow.get_offsetElementID()));
oWindow.moveTo(offsetElementBounds.x + oWindow.get_left(), offsetElementBounds.y + oWindow.get_top());
}
lastOpenedWindow = oWindow;
return false;
}
}
function onClickHandler(e) {
var targedNodeName = e.target;
if (lastOpenedWindow) {
// If the RadWindow is clicked then do nothing ;
if ($telerik.isMouseOverElementEx(lastOpenedWindow.get_popupElement(), e)) return;
lastOpenedWindow.close();
lastOpenedWindow = null;
}
}
</
script
>
</
telerik:RadScriptBlock
>
</
head
>
<
body
>
<
form
id
=
"form1"
runat
=
"server"
>
<
div
>
<
telerik:RadScriptManager
ID
=
"RadScriptManager1"
Runat
=
"server"
>
</
telerik:RadScriptManager
>
<
div
id
=
"divEmpMenu"
style
=
"width: 6%; display: inline-block;"
>
<
telerik:RadMenu
ID
=
"menuCheck"
runat
=
"server"
flow
=
"Vertical"
OnClientItemClicked
=
"MenuOpenWindow"
Width
=
"100%"
>
<
Items
>
<
telerik:RadMenuItem
ImageUrl
=
"../Images/button.jpg"
Value
=
"EmpProj"
/>
</
Items
>
</
telerik:RadMenu
>
<
telerik:RadWindow
id
=
"winEmpProj"
runat
=
"server"
Top
=
"0"
Left
=
"0"
Style
=
"z-index: 8000"
EnableEmbeddedSkins
=
"false"
OffsetElementID
=
"divEmpHeader"
ShowContentDuringLoad
=
"false"
VisibleStatusbar
=
"false"
VisibleTitlebar
=
"false"
AutoSize
=
"true"
>
<
ContentTemplate
>
<
div
id
=
"divProjListList"
runat
=
"server"
style
=
"width: 400px; background-color: Gray;"
>
<
div
>Projects</
div
>
<
div
style
=
"width: 400px"
>
<
p
>List of Projects and fun times.</
p
>
<
p
>More lists, more fun times.</
p
>
<
p
>Weee lists!</
p
>
</
div
>
</
div
>
</
ContentTemplate
>
</
telerik:RadWindow
>
</
div
>
<
div
id
=
"divEmpHeader"
style
=
"background-color: Teal; float: left; position: fixed; top: 100px; left: 200px;"
>
<
p
>Clicking on the button will consistently bring the window around me.</
p
>
<
p
>You have to click off the button to make me go away.</
p
>
<
p
><
a
href
=
"WebForm2.aspx"
>Click here to go to the broken page.</
a
></
p
>
</
div
>
</
div
>
</
form
>
</
body
>
</
html
>
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm2.aspx.vb" Inherits="RadWindowHijinks.WebForm2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<%@ Register Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
Namespace="System.Web.UI" TagPrefix="asp" %>
<
html
xmlns
=
"http://www.w3.org/1999/xhtml"
>
<
head
id
=
"Head1"
runat
=
"server"
>
<
title
>Fun with RadWindows!</
title
>
<
telerik:RadScriptBlock
ID
=
"RadScriptBlock1"
runat
=
"server"
>
<
script
type
=
"text/javascript"
>
//Global Variables
var lastOpenedWindow;
function pageLoad() {
$addHandler(document, "click", onClickHandler);
}
function MenuOpenWindow(sender, eventArgs) {
var oWindow;
//Closes the last window opened
if (lastOpenedWindow) {
lastOpenedWindow.close();
lastOpenedWindow = null;
}
if (eventArgs.get_item().get_value() == "EmpProj") {
oWindow = $find("<%=winEmpProj.ClientID%>");
oWindow.show();
if (oWindow.get_offsetElementID()) {
offsetElementBounds = $telerik.getBounds($get(oWindow.get_offsetElementID()));
oWindow.moveTo(offsetElementBounds.x + oWindow.get_left(), offsetElementBounds.y + oWindow.get_top());
}
lastOpenedWindow = oWindow;
return false;
}
if (eventArgs.get_item().get_value() == "Test2") {
oWindow = $find("<%=winTest2.ClientID%>");
oWindow.show();
if (oWindow.get_offsetElementID()) {
offsetElementBounds = $telerik.getBounds($get(oWindow.get_offsetElementID()));
oWindow.moveTo(offsetElementBounds.x + oWindow.get_left(), offsetElementBounds.y + oWindow.get_top());
}
lastOpenedWindow = oWindow;
return false;
}
}
function onClickHandler(e) {
var targedNodeName = e.target;
if (lastOpenedWindow) {
// If the RadWindow is clicked then do nothing ;
if ($telerik.isMouseOverElementEx(lastOpenedWindow.get_popupElement(), e)) return;
lastOpenedWindow.close();
lastOpenedWindow = null;
}
}
</
script
>
</
telerik:RadScriptBlock
>
</
head
>
<
body
>
<
form
id
=
"form1"
runat
=
"server"
>
<
div
>
<
telerik:RadScriptManager
ID
=
"RadScriptManager1"
Runat
=
"server"
>
</
telerik:RadScriptManager
>
<
div
id
=
"divEmpMenu"
style
=
"width: 6%; display: inline-block;"
>
<
telerik:RadMenu
ID
=
"menuCheck"
runat
=
"server"
flow
=
"Vertical"
OnClientItemClicked
=
"MenuOpenWindow"
Width
=
"100%"
>
<
Items
>
<
telerik:RadMenuItem
ImageUrl
=
"../Images/button.jpg"
Value
=
"EmpProj"
ToolTip
=
"AutoSize=true"
/>
<
telerik:RadMenuItem
ImageUrl
=
"../Images/button2.jpg"
Value
=
"Test2"
ToolTip
=
"AutoSize=false"
/>
</
Items
>
</
telerik:RadMenu
>
<
telerik:RadWindow
id
=
"winEmpProj"
runat
=
"server"
Top
=
"0"
Left
=
"0"
Style
=
"z-index: 8000"
EnableEmbeddedSkins
=
"false"
OffsetElementID
=
"divEmpHeader"
ShowContentDuringLoad
=
"false"
VisibleStatusbar
=
"false"
VisibleTitlebar
=
"false"
AutoSize
=
"true"
RenderMode
=
"Lightweight"
>
<
ContentTemplate
>
<
div
id
=
"divProjListList"
runat
=
"server"
style
=
"width: 400px; background-color: Gray;"
>
<
div
>Projects</
div
>
<
div
style
=
"width: 400px"
>
<
p
>List of Projects and fun times.</
p
>
<
p
>More lists, more fun times.</
p
>
<
p
>Weee lists!</
p
>
</
div
>
</
div
>
</
ContentTemplate
>
</
telerik:RadWindow
>
<
telerik:RadWindow
id
=
"winTest2"
runat
=
"server"
Top
=
"0"
Left
=
"0"
Style
=
"z-index: 8000"
EnableEmbeddedSkins
=
"false"
OffsetElementID
=
"divEmpHeader"
ShowContentDuringLoad
=
"false"
VisibleStatusbar
=
"false"
VisibleTitlebar
=
"false"
AutoSize
=
"false"
RenderMode
=
"Lightweight"
>
<
ContentTemplate
>
<
div
id
=
"div1"
runat
=
"server"
style
=
"width: 400px; background-color: Gray;"
>
<
div
>Projects</
div
>
<
div
style
=
"width: 400px"
>
<
p
>List of Projects and fun times.</
p
>
<
p
>More lists, more fun times.</
p
>
<
p
>Weee lists!</
p
>
</
div
>
</
div
>
</
ContentTemplate
>
</
telerik:RadWindow
>
</
div
>
<
div
id
=
"divEmpHeader"
style
=
"background-color: Teal; float: left; position: fixed; top: 100px; left: 200px;"
>
<
p
>Now, you can continually click on the button, and the window ever moves. It will move even if you click off the button and back on.</
p
>
<
p
>The first button, it'll eventually start hitting the same spots in a circlar kinda pattern.</
p
>
<
p
>The second button, the window will go in a diagonal downward placement.</
p
>
</
div
>
</
div
>
</
form
>
</
body
>
</
html
>