Popup window Location?

36 posts, 1 answers
  1. CAM
    CAM  avatar
    8 posts
    Member since:
    Apr 2008

    Posted 19 Feb 2012 Link to this post

    The last code segment is missing the measurement designation (PX)...this may cause weird popup locations depending on the base measurement designation.  Simply add 'px' to the locators.

                    // REALIGN THE WINDOW TO THE CENTER OF THE SCREEN BASED ON CURRENT POSITION  
                    popUp.style.position = "fixed";
                    popUp.style.left = popUpLeft + 'px';
                    popUp.style.top = popUpTop + 'px';
  2. Rob
    Rob avatar
    11 posts
    Member since:
    Apr 2011

    Posted 12 Sep 2012 Link to this post

    The code below works beautifully to launch the pop-up centered in the window the first time. However, if I close the pop-up and try to reopen it, I get the following javascript error:
    Error: TypeError: Sys.Res is undefined
    Source File: http://ajax.microsoft.com/ajax/4.0/2/MicrosoftAjax.debug.js
    Line: 271

    Any thoughts?

    function PopUpShowing(sender, eventArgs) {
        var popUp = eventArgs.get_popUp();
        var popUpWidth = popUp.style.width.substr(0, popUp.style.width.indexOf("px"));
        var popUpHeight = popUp.style.height.substr(0, popUp.style.height.indexOf("px"));
        var windowHeight = (typeof window.innerHeight != 'undefined' ? window.innerHeight : document.body.offsetHeight);
        var windowWidth = document.body.offsetWidth;
        if (popUpHeight == "") popUpHeight = 300; // if the height isn't set on the popup, default to 300px 
        popUp.style.position = "fixed";
        popUp.style.left = (Math.floor((windowWidth - popUpWidth) / 2)).toString() + "px";
        popUp.style.top = (Math.floor((windowHeight - popUpHeight) / 2)).toString() + "px";
    }
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. David Beck
    David Beck avatar
    38 posts
    Member since:
    Jun 2010

    Posted 12 Sep 2012 Link to this post

    Hi Rob,

    I am unable to reproduce this issues. Can you build a small sample app showing this issues and attache it i would be glad to help resolve this issue for you.
  5. Rob
    Rob avatar
    11 posts
    Member since:
    Apr 2011

    Posted 12 Sep 2012 Link to this post

    David,

    In the course of ripping things down so you can reproduce it, I stumbled a bit closer to the answer. If I remove the RadToolTipManager from the user control, the problem disappears. That's not something we can do in production (the editor is quite complicated and the ToolTips are very important to the end users). Below are the containing page and the user control, both heavily stripped out for simplicity.

    Default.aspx:
    <%@ Page language="c#" Title="Event Management" EnableViewState="true" %>
    <%@ Import Namespace="System.Collections.Generic" %>
    <script runat="server">
     
    private void Page_Load()
    {
    }
     
    private void rgEvents_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
    {
        DataTable dt = new DataTable();
        dt.Columns.Add("eventid", typeof(int));
        dt.Rows.Add(12);
        rgEvents.DataSource = dt;
    }
         
    // This method handles/overrides commands sent from the grid
    private void rgEvents_ItemCommand(object sender, GridCommandEventArgs e)
    {
        switch (e.CommandName)
        {
            case "Delete":
                e.Item.Selected = false;
                e.Item.Edit = false;
                break;
            case "Participants":
                rwCommands.NavigateUrl = "Participants.aspx?i=" + e.Item.OwnerTableView.DataKeyValues[e.Item.ItemIndex].GetString("eventid");
                rwCommands.AutoSize = true;
                rwCommands.VisibleOnPageLoad = true;
                rwCommands.DestroyOnClose = true;
                break;
            default:
                rwCommands.VisibleOnPageLoad = false;
                break;
        }
    }
     
    protected void rgEvents_PreRender(object sender, EventArgs e)
    {
        if (rgEvents.MasterTableView.IsItemInserted)
        {
            GridEditFormInsertItem editItem = (GridEditFormInsertItem)rgEvents.MasterTableView.GetInsertItem();
            UserControl userControl = (UserControl)editItem.FindControl(GridEditFormItem.EditFormUserControlID);
        }
    }
    </script>
    <asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="Server">
     
    <TELERIK:RadGrid runat="server" ID="rgEvents" AutoGenerateColumns="false" Visible="true" PageSize="20"
        AllowPaging="true" OnItemCommand="rgEvents_ItemCommand" OnPreRender="rgEvents_PreRender"
        OnNeedDataSource="rgEvents_NeedDataSource" HeaderStyle-HorizontalAlign="Center" ClientSettings-ClientEvents-OnPopUpShowing="PopUpShowing">
        <MasterTableView DataKeyNames="eventid" AllowPaging="true" CommandItemDisplay="Top" EditMode="PopUp" AllowAutomaticInserts="false" AllowAutomaticUpdates="false">
            <CommandItemSettings AddNewRecordText="Add new event" />
            <EditFormSettings EditFormType="WebUserControl" UserControlName="EventEditor.ascx">
                <PopUpSettings Width="700" CloseButtonToolTip="Cancel" />
                <EditColumn UniqueName="EditColumn" />
            </EditFormSettings>
            <Columns>
                <TELERIK:GridBoundColumn DataField="eventid" HeaderText="ID" />
            </Columns>
        </MasterTableView>
    </TELERIK:RadGrid>
     
    <TELERIK:RadAjaxManager runat="server" id="ramManager" DefaultLoadingPanelID="LoadingPanel" EnableAJAX="true" ClientEvents-OnRequestStart="conditionalPostback">
        <AjaxSettings>
            <TELERIK:AjaxSetting AjaxControlID="rgEvents">
                <UpdatedControls>
                    <TELERIK:AjaxUpdatedControl ControlID="rgEvents" />
                    <TELERIK:AjaxUpdatedControl ControlID="rwmManager" />
                    <TELERIK:AjaxUpdatedControl ControlID="Notification" />
                </UpdatedControls>
            </TELERIK:AjaxSetting>
        </AjaxSettings>
    </TELERIK:RadAjaxManager>
    <TELERIK:RadAjaxLoadingPanel runat="server" ID="LoadingPanel" />
     
    <TELERIK:RadWindowManager runat="server" ID="rwmManager" Modal="true" ShowContentDuringLoad="false"
        Behaviors="Close,Move,Resize" KeepInScreenBounds="true" VisibleStatusbar="false">
        <Windows>
            <TELERIK:RadWindow runat="server" NavigateUrl="/" ID="rwCommands" ReloadOnShow="true" />
        </Windows>
    </TELERIK:RadWindowManager>
    <TELERIK:RadScriptBlock ID="RadScriptBlock1"    runat="server" Visible="true">
    <script type="text/javascript">
        //On insert and update buttons click temporarily disables ajax to perform upload actions 
        function conditionalPostback(e, sender) {
            var theRegexp = new RegExp("\.btnSubmit$", "ig");
            if (sender.EventTarget.match(theRegexp)) {
                sender.EnableAjax = false;
            }
        }
        function PopUpShowing(sender, eventArgs) {
            var popUp = eventArgs.get_popUp();
            var popUpWidth = popUp.style.width.substr(0, popUp.style.width.indexOf("px"));
            var popUpHeight = popUp.style.height.substr(0, popUp.style.height.indexOf("px"));
            var windowHeight = (typeof window.innerHeight != 'undefined' ? window.innerHeight : document.body.offsetHeight);
            var windowWidth = document.body.offsetWidth;
            if (popUpHeight == "") popUpHeight = 300; // if the height isn't set on the popup, default to 300px 
            popUp.style.position = "fixed";
            popUp.style.left = (Math.floor((windowWidth - popUpWidth) / 2)).toString() + "px";
            popUp.style.top = (Math.floor((windowHeight - popUpHeight) / 2)).toString() + "px";
        }
    </script>
    </TELERIK:RadScriptBlock>
     
    </asp:Content>


    EventEditor.ascx:
    <%@ Control Language="c#" EnableViewState="True" ClassName="EventEditor" AutoEventWireup="true" %>
    <%@ Import Namespace="System.Collections.Generic" %>
    <%@ Import Namespace="System.Security.AccessControl" %>
    <script runat="server">
        public int EventId
        {
            get
            {
                return lbEventId.Text.ParseNullableInt32() ?? -1;
            }
            set
            {
                lbEventId.Text = value < -1 ? "New Event" : value.ToString();
            }
        }
     
        private object _dataItem = null;
        public object DataItem
        {
            get { return _dataItem; }
            set
            {
                _dataItem = value;
                try
                {
                    EventId = Convert.ToInt32(DataBinder.Eval(DataItem, "eventid"));
                }
                catch { }
            }
        }
     
        private void Page_Load()
        {
            LoadEvent();
        }
     
        private void LoadEvent()
        {
            if (EventId < 1) return;
        }
     
    </script>
    <style type="text/css">
    .cblRoles td
    {
        padding: 0 !important;
    }
    </style>
    <div style="margin: 20px;">
        <asp:PlaceHolder runat="server" ID="phTopForm">
            <table class="style1">
                <tr>
                    <th>
                        Event ID:
                    </th>
                    <td>
                        <asp:Label runat="server" ID="lbEventId" Text='<%# (Container is GridEditFormInsertItem) ? "New Event" : EventId.ToString() %>' />
                    </td>
                </tr>
            </table>
        </asp:PlaceHolder>
        <div style="text-align: right; margin: 10px;">
            <asp:Button ID="btnClose" runat="server" Text="Cancel" CommandName="Cancel" CausesValidation="false" />
        </div>
    </div>
    <TELERIK:RadAjaxManagerProxy runat="server" ID="ram">
        <AjaxSettings>
            <TELERIK:AjaxSetting AjaxControlID="btnCancel">
                <UpdatedControls>
                    <TELERIK:AjaxUpdatedControl ControlID="Notification" />
                    <TELERIK:AjaxUpdatedControl ControlID="RadToolTipManager1" />
                </UpdatedControls>
            </TELERIK:AjaxSetting>
        </AjaxSettings>
    </TELERIK:RadAjaxManagerProxy>
    <TELERIK:RadScriptBlock runat="server" Visible="true">
        <script type="text/javascript">
        </script>
    </TELERIK:RadScriptBlock>
    <TELERIK:RadToolTipManager ID="RadToolTipManager1" runat="server" AutoTooltipify="false" Width="300"
        Position="MiddleLeft" Visible="true" RelativeTo="Element">
        <TargetControls>
            <TELERIK:ToolTipTargetControl TargetControlID="ttTitle" IsClientID="true" />
        </TargetControls>
    </TELERIK:RadToolTipManager>
  6. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 18 Sep 2012 Link to this post

    Hello,

    I suggest you to disable ajax (set the EnableAjax property of RadAjaxManager to false) and see if you receive any server-side error exception. After removing it, you can turn the ajax back on.

    Kind regards,
    Pavlina
    the Telerik team
    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 their blog feed now.
  7. Rob
    Rob avatar
    11 posts
    Member since:
    Apr 2011

    Posted 18 Sep 2012 Link to this post

    No errors occur when disabling AJAX. Setting ScriptMode="Release" on the RadScriptManager declaration (suggested in the bug report I filed) does prevent the error from occurring.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017