This is a migrated thread and some comments may be shown as answers.

Rad Grid EditForm Popup Location

8 Answers 680 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Shane P
Top achievements
Rank 1
Shane P asked on 13 Sep 2008, 04:04 AM
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

8 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 2
answered on 15 Sep 2008, 04:40 AM
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.
0
Shane P
Top achievements
Rank 1
answered on 15 Sep 2008, 06:18 AM
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
0
Princy
Top achievements
Rank 2
answered on 15 Sep 2008, 09:13 AM
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.
0
David
Top achievements
Rank 1
answered on 07 Dec 2009, 05:03 PM
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 ?

0
Samir Shah
Top achievements
Rank 1
answered on 22 Feb 2010, 05:14 PM

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!

0
Jyothi Nattava
Top achievements
Rank 1
answered on 22 Mar 2010, 04:32 PM

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.

0
Lucania
Top achievements
Rank 1
answered on 17 May 2012, 01:30 AM
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
0
Lucania
Top achievements
Rank 1
answered on 17 May 2012, 01:35 AM
Umm ignore that - I didn't have the height set in my PopupSettings.

ROSCO
Tags
Grid
Asked by
Shane P
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 2
Shane P
Top achievements
Rank 1
Princy
Top achievements
Rank 2
David
Top achievements
Rank 1
Samir Shah
Top achievements
Rank 1
Jyothi Nattava
Top achievements
Rank 1
Lucania
Top achievements
Rank 1
Share this question
or