RadWindow not respecting Top and Left

[Amanda]

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>

[Marin Bratanov]

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

[Amanda]

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;
}