[Solved] grid edit popup position

[farsica]

Hi.
is it possible to control position that edit popup showed?I want it showed in center of grid but it always showed on left top edge of grid

Best regards

[Bill O'Neil]

I have the same issue - I have an AJAX-ified radGrid on a page with several other elements.  When the PopUp opens it does so entirely relative to the Grid - which often places it at the bottom of the page (and mostly off the screen.)

What I need is to open the window elsewhere on the screen - preferable relative to the top of the page.  Is there any way to do this?

Bill

[Princy]

Hi,

The Popup EditForm settings are controlled through the PopUpSettings property of the GridEditFormSettingsobject. It exposes 3 properties:

• Height - defines the height of the popup in pixels or percentage
• Width - defines the width of the popup in pixels or percentage
• ScrollBars - defines whether and which scrollbars should appear in the edit form. This setting is with higher priority, so if Heightis set but the vertical scrollbar is not shown and the content requires more room, the popup will be resized to accommodate the entire content. The default value is None.

More information can be collected from the following help document link.
Popup Edit Form

Princy.

[Yavor]

Hi Bill,

You can easily customize the positionof the popup. This is demonstrated in the code snippets below:

.aspx

  <style type="text/css">

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

    </style>

.cs

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

I hope this information helps.

Kind regards,
Yavor
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Bill O'Neil]

Thanks for the code - it appears that the absolute positioning (done in this manner) is still relative to the opening grid (not the page itself.)

Is this correct?  Any way to reference the page?

[Guss]

The recommendation does not work for me. My Grid has a width and height property set. The popup (or part of it) is also not visible if it renders outside the width and height boundries as been set for the grid (with scrollbars)

[Guss]

Hi

I've figured out that the popup edit box behave "funny" under this conditions:
My whole website is centered in a div:

#widthControl
{
    width: 970px;
    min-height:100%;
    height:100%;
    margin-right: auto;
    margin-left:auto;
}

This is obvious the best way to do this, as this works in IE, FF and Safari.
(Text-Align syntax does not work in Safari and a hack must be used for FF)

When popup that is for example 800px wide, the right hand side is cut-off if scrolling is on (grid scrolls horizontal because it is actually wider than the outer div).

It seems that the popup is somehow seeing the total width of the grid, which could be 1000's of  pixs wide.

Tried setting the z-index, absolute positioning, relative...nothing works.

[Vlad]

Hello Guss,

We added OnPopUpShowing client-side event where you can get access to the grid popup edit form element and apply desired position. This will be available in the upcoming service pack next week.

Here is an example:

    <script type="text/javascript">
        function PopUpShowing(sender, args)
        {
            var popUp = args.get_popUp();

            // set directly desired top, left, etc.
           
            // args.set_cancel(true); cancel the edit form show if needed
        }
    </script>


All the best,
Vlad
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Guss]

Thanks for this.

I have also established that as soos as I use <GroupByExpressions> something drasticly change with the styles. Something to do with overflow sroll and overflow visible.

When I have an GroupByExpressions is my grid, the popup behaves wrong, when  do not have the GroupByExpressions, the popup behave as expected.

When there is a GroupByExpressions, then some style is set to overflow:scroll I think, because the popup is falling a a scroll area. (I have to scroll the grid right and down to see the whole popup. As soon as I remove the tag GroupByExpressions, the overflow is visible and the popup IS POSITIONED exactly as your code intented it to be.

[Guss]

In the above senario, I could get the correct behaviour back by adding this:

.GridDataDiv_Vista {
    height:100% !important;
    overflow:visible !important;
}

Its not tested yet to see what I could be breaking because of this style.
PS:  this is where scrolling is set to true and where groupbyexpression is used in conjunction with popup edit forms.

[Iana Tsolova]

Hi Guss,

Thank you for pointing this issue out. We will consider fixing the popup form positioning when RadGrid is grouped for our next release. In the mean time, you could have a look at our online demo for window editing here.

Please excuse us for the inconvenience.

Sincerely yours,
Iana
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Guss]

Hi Iana

Thanks for all the help on this issue.
I have switched to EditForm mode for my grids now - less tweaking and coding :-)

Regards
Guss