Grid modal popup edit appears behind fade?

[Carl Sköldkvist]

Renderingissue using RadGrid built-in edit modal popup.

The issuewe have is illustrated in the attached screenshots.

This first grid1.png is ok, the grid edit popup appears in front of the dimmed out area. However, ifI fire up the same page using the machine name instead of the ip address thepopup is placed behind the dimming div as seen on grid2.png.

Thisobviously blocks the user from editing the value.

Environment:

Asp.Net,.Net framework 3.5

IE8 and IE7compatibility mode

Anyonestumbled over this before?

Otherhints?

Code:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SystemParametersView.aspx.cs" Inherits="CSAdmin.Web.SysAdmin.SystemParametersView" MasterPageFile="~/CSAdmin.Master" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Charting" Assembly="Telerik.Web.UI" %>
<%@ Register Src="~/Controls/EditButtonsControl.ascx" TagName="EditButtonsControl" TagPrefix="uc1" %>
<%@ Register src="~/Controls/CSHiddenControl.ascx" TagName="CSHiddenControl" TagPrefix="uc1"%>
<asp:Content ContentPlaceHolderID="HeaderExtrasCPH" runat="server">
<telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxy1" runat="server" >
    <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="GridView">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="GridView" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
</telerik:RadAjaxManagerProxy>
<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 popUppopUpWidth = popUp.style.width.substr(0, popUp.style.width.indexOf("px"));
                    var popUppopUpHeight = 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 -200).toString() + "px";
                }
            </script>

        </telerik:RadCodeBlock>


</asp:Content>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContentPlaceHolder" runat="server">

    <telerik:RadAjaxManagerProxy ID="RA" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="GridView">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="GridView" LoadingPanelID="LP" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManagerProxy>
    <telerik:RadAjaxLoadingPanel ID="LP" runat="server" Skin="Office2007"></telerik:RadAjaxLoadingPanel>
    <telerik:RadGrid ID="GridView" CssClass="DTSGrid" ShowStatusBar="True" AllowSorting="True" PageSize="20" GridLines="None" AllowPaging="True"
            runat="server" AllowAutomaticUpdates="True" AllowMultiRowEdit="false" OnUpdateCommand="RadGrid1_UpdateCommand" OnInsertCommand="GridView_InsertCommand"
            AutoGenerateColumns="False" Skin="Office2007" OnItemUpdated="RadGrid1_ItemUpdated" OnNeedDataSource="RadGrid1_NeedDataSource">

        <MasterTableView EditMode="PopUp" Width="100%" DataKeyNames="Key" AllowMultiColumnSorting="True" InsertItemDisplay="Top" CommandItemDisplay="None">
        <Columns>
                <telerik:GridBoundColumn DataField="Key" HeaderText="<%$ Resources:LocalizedText, Key %>" SortExpression="Key" />
                <telerik:GridBoundColumn  DataField="Value" HeaderText="<%$ Resources:LocalizedText, Value %>" UniqueName="Value" SortExpression="Value" />
                <telerik:GridEditCommandColumn ButtonType="ImageButton"></telerik:GridEditCommandColumn>
            </Columns>
            <EditFormSettings CaptionDataField="Key" EditFormType="Template" PopUpSettings-Modal="true" >
                <FormTemplate>
                    <div id="dockdiv" class="dockdiv">
                        <table>
                            <tr>
                                <td>
                                    <asp:Label ID="Label1" runat="server" Text="<%$ Resources:LocalizedText, Key %>"></asp:Label>
                                </td>
                                <td>
                                    <asp:TextBox ID="Key" runat="server" Text='<%# Bind("Key") %>'></asp:TextBox>
                                    <asp:RequiredFieldValidator ID="RFV1" runat="server" ControlToValidate="Key" ErrorMessage="*"></asp:RequiredFieldValidator>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <asp:Label ID="Label2" runat="server" Text="<%$ Resources:LocalizedText, Value %>"></asp:Label>
                                </td>
                                <td>
                                    <asp:TextBox ID="Value" runat="server" Text='<%# Bind("Value") %>'></asp:TextBox>
                                    <asp:RequiredFieldValidator ID="RFV2" runat="server" ControlToValidate="Value" ErrorMessage="*"></asp:RequiredFieldValidator>
                                </td>
                            </tr>
                            <tr>
                                <td style="text-align:right">
                                    <asp:Button ID="Save" runat="server" CommandName='<%# (Container is GridEditFormInsertItem) ? RadGrid.PerformInsertCommandName : RadGrid.UpdateCommandName %>' Text="<%$ Resources:LocalizedText, SaveButtonText %>" />
                                </td>
                                <td>
                                    <asp:Button ID="Cancel" runat="server" CausesValidation="false"
                                        CommandName="Cancel" Text="<%$ Resources:LocalizedText, CancelButtonText %>" />
                                </td>
                            </tr>
                        </table>
                    </div>
                </FormTemplate>
            </EditFormSettings>
        </MasterTableView>
         <ClientSettings>
                <ClientEvents OnPopUpShowing="PopUpShowing" />
         </ClientSettings>
    </telerik:RadGrid>
</asp:Content>

Regards,

Carl

[Dimo]

Hello Carl,

Indeed, in certain scenarios the popup edit form is unable to pop above the modal background. Such scenarios include cases when the RadGrid control is placed inside a container with some CSS positioning (absolute, relative) or when the control is placed inside a scrollable container.

If you need the scenario working in IE7 and IE8 compatibility mode, please do not use a modal popup edit form, or rework your page layout, if possible.

Best wishes,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Dio Phung]

Hi,

I have exactly the same problem when Popup Modal does not work under IE8 (compatibility view) and IE7.

The modal popup will also be grayed out and disabled, therefore the whole page is faded.

Please see attachment.

Since it's impossible to ask everyone in our organization to update to IE8, I wonder whether the Telerik Team can look into this issue and let me know any work-around or release a fix asap ?

Thanks.

Rgds,

Dio

[Dimo]

Hi Dio,

Please refer to my suggestions above. Note that modal popup edit form with static headers and grouping cannot be supported because the RadGrid data area is positioned relatively, which creates a new stacking context that is always below the modal background.

Kind regards,
Dimo
the Telerik team

[Dio Phung]

Hi Dimo,
So in this case, how do I get my popup modal working?

FYI, currently I put my RadGrid inside a RadDock (which is scrollable), therefore I bet the modal popup is not working.

Is there a way to fix it under IE7 ? Move the RadGrid outside the RadDock?
Your reply is most welcome.

Thanks
Dio

[Dimo]

Hi Dio,

Yes, you can try moving RadGrid outside the RadDock.

As mentioned above, there are scenarios, in which the popup edit form is supported only if it is not modal. If this is your case, you may need to disable the modality.

Kind regards,
Dimo
the Telerik team