RadWindow not respecting Top and Left

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

    Posted 01 Jul 2013 Link to this post

    Howdy all.

    I've got a 'fun' situation.  I have a vertical grown, image only menu on my left hand side, and a right side content area.  The idea is that on the right, you'll see pertinent employee data, and the menu will pull up extra info as you wish to see it, through RadWindows.  I'm using an OffsetElementID of my header on the right hand side, which (as I understand it) should mean that if I have set Top and Left at 0, my window should have a matching upper left hand corner as the header.

    That's not what it's doing right now.  I can't get it to respect Top at all.  It'll go Left any way I tell it, but it won't go up further than it's initially appearing on the page.  Here's my code, and a picture to hopefully illustrate what I mean.

    I've also included my Javascript, which I got off these forums for how I'm opening and closing the windows.  I tried programmatically setting them in there with oWindow.set_top(0); and oWindow.set_left(0);, but that didn't work.

    Thanks for your help!

    <telerik:RadMenu id="menuMain" ClientIDMode="Static" runat="server" flow="Vertical" OnClientItemClicked="MenuOpenWindow" Width="100%"
        BackColor="#37495D">
        <Items>
          <telerik:RadMenuItem ImageUrl="../Images/button1.png" Value="EmpProj" />
        </Items>
    </telerik:RadMenu>
     
     
     
    <telerik:RadWindow id="winProjList" 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;">
                <div>Projects</div>
                <div style="width: 400px">
                    <telerik:RadGrid ID="grdCheckAcctList" runat="server" AutoGenerateColumns="False"
                        Skin="" EnableLinqExpressions="False" CellSpacing="0" EnableViewState="False">
                        <ClientSettings Selecting-AllowRowSelect="true" EnablePostBackOnRowClick="true" />
                        <MasterTableView DataKeyNames="KeyColumn" ShowHeader="true" HeaderStyle-HorizontalAlign="Center" EnableViewState="false">
                            <Columns>
                                <telerik:GridBoundColumn DataField="Department" />
                                <telerik:GridBoundColumn DataField="Project" />
                                <telerik:GridBoundColumn DataField="Supervisor" />
                                </telerik:GridBoundColumn>
                            </Columns>
                            <HeaderStyle HorizontalAlign="Center" />
                        </MasterTableView>
                        <FilterMenu EnableImageSprites="False">
                        </FilterMenu>
                    </telerik:RadGrid>
                </div>
            </div>
        </ContentTemplate>
    </telerik:RadWindow>

    <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
        <script type="text/javascript">
            //Global Variables
            var lastOpenedWindow;
             
            function pageLoad() {
                $addHandler(document, "click", onClickHandler);
            }
     
            function MasterMenuOpenWindow(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.set_top(0);
                          oWindow.set_left(0);
                          oWindow.show();
                    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>
  2. Answer
    Marin Bratanov
    Admin
    Marin Bratanov avatar
    3600 posts

    Posted 02 Jul 2013 Link to this post

    Hello Amanda,

    The offsetElementID is the ClientID of the element that should be used as offset, so if the divEmpHeader has the runat=server attribute I would advise setting the OffsetELementID from the code-behind as shown here for the OpenerElementID.

    I can also suggest you try the following approach that will move the RadWindow only after it is shown:
    oWindow = $find("<%=winEmpProj.ClientID%>");
    oWindow.show();
    oWindow.moveTo(0, 0);

    I also notice that the ID of the popup shown by the pasted script is different from the ID of the pasted RadWindow - winEmpProj vs winProjList so you may also be getting a different popup than the desired one.


    Here is also another function that will always position the radwindow according to the offset element:
    function openPopup()
    {
        if (lastOpenedWindow)
        {
            lastOpenedWindow.close();
            lastOpenedWindow = null;
        }
     
        oWindow = $find("<%=winEmpProj.ClientID%>");
        oWindow.show();
        if (oWindow.get_offsetElementID())
        {
            var offsetElementBounds = $telerik.getBounds($get(oWindow.get_offsetElementID()));
            oWindow.moveTo(offsetElementBounds.x, offsetElementBounds.y + offsetElementBounds.height);
        }
        lastOpenedWindow = oWindow;
        return false;
    }


    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 02 Jul 2013 Link to this post

    Marin,

    Thanks for your answer!  The name difference was a bad copy/paste on my part, but your second option is exactly what I needed!  I've done a small modification to it (which is below) to read off the Top and Left set, and you've just made my day a whole lot easier.  Thank you, thank you, thank you!

    if (eventArgs.get_item().get_value() == "ProjList") {
        oWindow = $find("<%=winProjList.ClientID%>");
        oWindow.show();
        if (oWindow.get_offsetElementID()) {
            var offsetElementBounds = $telerik.getBounds($get(oWindow.get_offsetElementID()));
            oWindow.moveTo(offsetElementBounds.x + oWindow.get_left(), offsetElementBounds.y + oWindow.get_top());
        }
        lastOpenedWindow = oWindow;
        return false;
    }
Back to Top