RadGrid popup position

[Lev]

Hello, I am having problem positioning correctly popup window when grid pagesize is 100 and grid using static headers.

When scrolling to the bottom of the page and clicking edit button, popup form displaying outside of screen boundries.

I tried approach with implementing event OnPopShowing, but I think it missing Y position in scrolling area.

    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
      <script type="text/javascript">
          var popUp;
          function PopUpShowing(sender, eventArgs) {
              popUp = eventArgs.get_popUp();
              var gridWidth = sender.get_element().offsetWidth;
              var gridHeight = sender.get_element().offsetHeight;
              var popUpWidth = popUp.style.width.substr(0, popUp.style.width.indexOf("px"));
              var popUpHeight = popUp.style.height.substr(0, popUp.style.height.indexOf("px"));
              popUp.style.left = ((gridWidth - popUpWidth) / 2 + sender.get_element().offsetLeft).toString() + "px";
              popUp.style.top = ((gridHeight - popUpHeight) / 2 + sender.get_element().offsetTop).toString() + "px";
          }
      </script>
    </telerik:RadCodeBlock>

    <telerik:RadGrid ID="gridLockbox" runat="server" PageSize="100" PagerStyle-PageButtonCount="5"
        OnNeedDataSource="gridLockbox_NeedDataSource" OnDetailTableDataBind="gridLockbox_DetailTableDataBind"
        OnItemDataBound="gridLockbox_ItemDataBound" OnUpdateCommand="gridLockbox_UpdateCommand"
        AllowPaging="true" AllowSorting="true" ShowGroupPanel="true" Height="700px"
        RenderMode="Lightweight" Skin="WebBlue">
        <GroupingSettings ShowUnGroupButton="True" CaseSensitive="false" />
        <ClientSettings AllowColumnsReorder="true" AllowColumnHide="true" AllowDragToGroup="true">
            <Scrolling AllowScroll="true" UseStaticHeaders="true" SaveScrollPosition="true" />
            <ClientEvents OnPopUpShowing="PopUpShowing" />
        </ClientSettings>
        <MasterTableView EditMode="PopUp" AutoGenerateColumns="false" AllowFilteringByColumn="true" DataKeyNames="TransUID"
            AllowMultiColumnSorting="true" CommandItemDisplay="None" ShowGroupFooter="true" TableLayout="Fixed" Font-Size="10">
            <EditFormSettings EditFormType="WebUserControl" UserControlName="LockboxCtrl.ascx">
                <PopUpSettings Modal="true" Width="1500px" KeepInScreenBounds="False"/>
            </EditFormSettings>
        </MasterTableView>
    </telerik:RadGrid>

[Vasko]

Hi Lev,

Thank you for the provided code snippet.

I conducted a test with it and was able to replicate the reported behavior of the popup window getting outside the boundaries of the page (see window1.gif).

Based on the provided information, the problem lies within the calculation of the popup position's top attribute:

popUp.style.top = ((gridHeight - popUpHeight) / 2 + sender.get_element().offsetTop).toString() + "px";

Depending on the width of the popup window, you'll need to adjust the value of the devisor in the formula (the "2").

Below the formula is adjusted to divide a bigger value than 2:

Compared to the big gap shown in the gif, the window in the screenshot is positioned correctly inside the boundaries of the screen.

As mentioned above, you'll need to play around with the value and see which fits well with the configuration used in your scenario.

I hope this information helps you out.

Kind regards,
Vasko
Progress Telerik