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
8 Answers, 1 is accepted

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.

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

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.

Any suggestions for this ?

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!

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.

The horizontal centring works fine.
ROSCO

ROSCO