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

[Solved] RenderMode=Lightweight adding to Top and Left

2 Answers 88 Views

Window

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

Amanda asked on 16 Jul 2013, 08:21 PM

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?

<%@ 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>

</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>

</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>

</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>

</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>

</form>

</body>

</html>

2 Answers, 1 is accepted

answered on 18 Jul 2013, 01:05 PM

Hello Amanda,

Thank you for reaching out. I am logging this bug for fixing and you can follow it here: http://feedback.telerik.com/Project/108/Feedback/Details/53887. I have also updated your Telerik points for your report. I am afraid, however, that there is no possible workaround for the lightweight rendermode at the moment.

Regards,
Marin Bratanov
Telerik

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.