RenderMode=Lightweight adding to Top and Left

3 posts, 0 answers
  1. Amanda
    Amanda avatar
    30 posts
    Member since:
    Aug 2012

    Posted 16 Jul 2013 Link to this post

    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. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 18 Jul 2013 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Amanda
    Amanda avatar
    30 posts
    Member since:
    Aug 2012

    Posted 18 Jul 2013 Link to this post

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