Howto: Center align popup window for editing

6 posts, 1 answers
  1. JD.
    JD. avatar
    37 posts
    Member since:
    Aug 2012

    Posted 26 Sep 2011 Link to this post

    Hi
    Following are the lines from my HTML page.  I want to control the position of popup window duing add/edit.
    It should be center align to the screen/browser window.  How do set it ?
     

    Regards
    JD

    <MasterTableView CommandItemDisplay="TopAndBottom" EditMode="PopUp"   Width="100%" 
    DataKeyNames="PropertyID" GridLines="Both"
    PagerStyle-AlwaysVisible="True"
    >

     

    <EditFormSettings EditFormType="Template" PopUpSettings-Width="900px" 
    CaptionFormatString="Edit Property: {0}"
    CaptionDataField="PropertyName"
    InsertCaption="Add New Property"
      
    PopUpSettings-ScrollBars="Vertical">
  2. Jayesh Goyani
    Jayesh Goyani avatar
    2732 posts
    Member since:
    May 2010

    Posted 26 Sep 2011 Link to this post

    Hello,

    <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="RadGrid1" AutoGenerateEditColumn="true" runat="server" AllowAutomaticDeletes="True"
      AllowAutomaticInserts="True" AllowAutomaticUpdates="True" DataSourceID="SqlDataSource1"
      AllowSorting="true" Skin="Hay" AllowPaging="true">
      <MasterTableView EditMode="PopUp" CommandItemDisplay="Top" DataKeyNames="ProductID">
        <EditFormSettings CaptionFormatString="Edit ProductID: {0}" CaptionDataField="ProductID"
          PopUpSettings-Height="260px" PopUpSettings-Width="400px" />
      </MasterTableView>
      <ClientSettings>
        <ClientEvents OnPopUpShowing="PopUpShowing" />
        <Selecting AllowRowSelect="true" />
      </ClientSettings>
    </telerik:RadGrid>
     


    Thanks,
    Jayesh Goyani
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. JD.
    JD. avatar
    37 posts
    Member since:
    Aug 2012

    Posted 27 Sep 2011 Link to this post

    Hi Jayesh,

    Marking this question open again.... Your solution does work, but when i make PopUpSettings-Modal="true"  it fails
    to center align window.

    <EditFormSettings EditFormType="Template" PopUpSettings-Width="900px"
    CaptionFormatString="Edit Property: {0}"
    CaptionDataField="PropertyName"
    InsertCaption="Add New Property"
    PopUpSettings-Modal="true"
    PopUpSettings-Height="500px"
    PopUpSettings-ScrollBars="Vertical">


    Regards
    JD.
  5. Jayesh Goyani
    Jayesh Goyani avatar
    2732 posts
    Member since:
    May 2010

    Posted 27 Sep 2011 Link to this post

    Hello,

    sorry by misatake.........

    set <MasterTableView EditMode="PopUp" inplace of PopUpSettings-Modal="true"

    Thanks,
    Jayesh Goyani
  6. JD.
    JD. avatar
    37 posts
    Member since:
    Aug 2012

    Posted 27 Sep 2011 Link to this post

    Hi Jayesh,

    <MasterTableView EditMode="PopUp"   is already set to popup.

    if the default behaviour is that it does popup but also allows user to go behind the popup window.  we need to lock so user does not accidently move to other areas.   Thesefore I set PopUpSettings-Modal="true" with EditMode='Popup' in MasterTableView.

    But due to that setting, the javascript code you gave, stopped working.

    Regards
    JD
  7. Answer
    Jayesh Goyani
    Jayesh Goyani avatar
    2732 posts
    Member since:
    May 2010

    Posted 27 Sep 2011 Link to this post

    Hello,

    i update JS.

    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
           <script type="text/javascript">
               var popUp;
               function PopUpShowing(sender, eventArgs) {
     
                   var myWidth = 0, myHeight = 0;
                   if (typeof (window.innerWidth) == 'number') {
                       //Non-IE
                       myWidth = window.innerWidth;
                       myHeight = window.innerHeight;
                   } else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
                       //IE 6+ in 'standards compliant mode'
                       myWidth = document.documentElement.clientWidth;
                       myHeight = document.documentElement.clientHeight;
                   } else if (document.body && (document.body.clientWidth || document.body.clientHeight)) {
                       //IE 4 compatible
                       myWidth = document.body.clientWidth;
                       myHeight = document.body.clientHeight;
                   }
                    
                   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 = ((myWidth - popUpWidth) / 2 + sender.get_element().offsetLeft).toString() + "px";
                   popUp.style.top = ((myHeight - popUpHeight) / 2 + sender.get_element().offsetTop).toString() + "px";
                    
               }
           </script>
       </telerik:RadCodeBlock>
    <telerik:RadGrid ID="RadGrid1" AutoGenerateEditColumn="true" runat="server" AllowAutomaticDeletes="True"
               AllowAutomaticInserts="True" AllowAutomaticUpdates="True" DataSourceID="SqlDataSource1"
               AllowSorting="true" Skin="Hay" AllowPaging="true">
               <MasterTableView EditMode="PopUp" CommandItemDisplay="Top">
                   <EditFormSettings CaptionFormatString="Edit ProductID:"
                       PopUpSettings-Height="260px" PopUpSettings-Width="400px" PopUpSettings-Modal="true" />
               </MasterTableView>
               <ClientSettings>
                   <ClientEvents OnPopUpShowing="PopUpShowing" />
                   <Selecting AllowRowSelect="true" />
               </ClientSettings>
           </telerik:RadGrid>
     
           <asp:SqlDataSource ID="SqlDataSource1" runat="server"
               ConnectionString="<%$ ConnectionStrings:Test1DatabaseConnectionString %>"
               SelectCommand="SELECT [col1] FROM [Table1]"></asp:SqlDataSource>

    let me know if any concern.

    Thanks,
    Jayesh Goyani
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017