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

Grid modal popup edit appears behind fade?

5 Answers 156 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Carl Sköldkvist
Top achievements
Rank 1
Carl Sköldkvist asked on 18 Jan 2010, 03:45 PM

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

5 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 18 Jan 2010, 04:56 PM
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.
0
Dio Phung
Top achievements
Rank 1
answered on 18 Jun 2010, 05:09 AM
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

0
Dimo
Telerik team
answered on 18 Jun 2010, 08:03 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Dio Phung
Top achievements
Rank 1
answered on 20 Jun 2010, 02:56 AM
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
0
Dimo
Telerik team
answered on 21 Jun 2010, 10:09 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Tags
Grid
Asked by
Carl Sköldkvist
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Dio Phung
Top achievements
Rank 1
Share this question
or