Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

RenderMode=Lightweight adding to Top and Left

2 Answers 40 Views
Window
This is a migrated thread and some comments may be shown as answers.
Amanda
Top achievements
Rank 1
Iron
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" %>
 
<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" %>
 
<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>

2 Answers, 1 is accepted

Sort by
0
Marin Bratanov
Telerik team
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.
0
Amanda
Top achievements
Rank 1
Iron
answered on 18 Jul 2013, 01:28 PM
The workaround, for me at least, is simply to hard code where I want my windows, which for this project is good enough.  Thanks for putting it in your bug tracker! :D
Tags
Window
Asked by
Amanda
Top achievements
Rank 1
Iron
Answers by
Marin Bratanov
Telerik team
Amanda
Top achievements
Rank 1
Iron
Share this question
or