Rad Grid EditForm Popup Location

[Shane P]

Hi there,

I have created a form that contains a RadGrid and I am trying to use the PopUp edit mode to display a usercontrol.

I have got it working and it pops up however I dont like the location of the popup. Can anyone suggest how I can have it so it pops up in the center of the screen?

Thank you

[Shinu]

Hi Shane,

Try the following code snippet to customize the position of the Popup.

CS:

protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
    {
        if (e.Item.IsInEditMode)
        {
            GridEditFormItem editForm = (GridEditFormItem)e.Item;
            editForm.EditFormCell.CssClass = "MyClass";
        }
    }

ASPX:

<style type="text/css">

    .MyClass
    {
     position:absolute;
     top:100px;
     left:100px;
    }

    </style>

Regards
Shinu.

[Shane P]

Hi Shinu

Thanks for your quick response however that doesn't seem to work. By applying your code sample it turns the popup in a modalpop disabling all the controls that fall inside the grid.
It does move the popup down and to the right.

Any other ideas?

Thanks
Shane

[Princy]

Hello Shane,

You can go through the following link which explains how to change the default position of the PopUp edit form on the page using the OnPopUpShowing client-side event of RadGrid.
Center PopUp edit form in RadGrid

Princy.

[David]

I have used this sample above and it works inside the grid, but i would prefer it to center in the current browser window - and not be centered in the grid.

Any suggestions for this ?

[Samir Shah]

Try this:

1) Add the following script on the master page
 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 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)-150) + sender.get_element().offsetTop).toString() + "px";
              
            }


2) Register the above script in the clientevents like
          <ClientEvents OnPopUpShowing="PopUpShowing"/>

 Note: i am subtracting 150px in calculating the height, because most of the users have toolbars installed and stuff. You can play around with it to suit your needs.

Happy teleriking!

[Jyothi Nattava]

Samir,

 

         I tried with your code. what is happening is

1.IE -- when I edit grid for first time, the grid is getting disabled, but no popup is showing and so I cannot edit any other row as grid is disabled.
2. Firefox-- when I edit for first time, grid is still enabled and no popup is showing. When I edit  any other row popuup shows up and I can able to edit.

So what I noticed is in IE the grid getting disabled and Firefox it is not, so  I am able to edit then onwards in Firefox.
It is obvious the scritp is not working first time.

Am I doing anything worng or do I need to set any properties?

Thanks,
Jyothi.

[Lucania]

I also tried the code at http://www.telerik.com/help/aspnet-ajax/grid-center-popup-edit-form.html and it partially works, however popUp.style.height returns a blank value in the event, so it is not correctly centred vertically. Is there any reason for that?

The horizontal centring works fine.

ROSCO

[Lucania]

Umm ignore that - I didn't have the height set in my PopupSettings.

ROSCO