[Solved] EditForm appearing outside of RadGrid.

[Kyle Murphy]

Hi,

I have searched documentation and the internet for possible resolutions to this problem with no luck so far. 

I have an instance of RadGrid which utilizes a WebUserControl for its EditForm. The EditForm itself works fine, but when the EditForm is shown, it can appear outside of the RadGrid, as shown in the attached photo. Below are relevant code snippets.

Default.aspx:

    <asp:UpdatePanel ID="notificationGridUpdatePanel" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="true">
        <ContentTemplate>
            <telerik:RadGrid ID="notificationGrid" runat="server" Visible="false" Height="500" Width="1200" Skin="Hay" AllowSorting="true" AutoGenerateColumns="false" OnItemDataBound="notificationGridItemDataBound"
                OnNeedDataSource="notificationGridNeedDataSource" OnUpdateCommand="notificationGridUpdateCommand" OnInsertCommand="notificationGridInsertCommand" OnDeleteCommand="notificationGridDeleteCommand" >
                <MasterTableView Width="100%" CommandItemDisplay="Top" CommandItemSettings-AddNewRecordText="Add new notification">
                    <Columns>
                        <telerik:GridEditCommandColumn HeaderText="Edit" UniqueName="EditColumn" HeaderStyle-Width="50px" />
                        <telerik:GridButtonColumn HeaderText="Delete" UniqueName="DeleteColumn" Text="Delete" CommandName="Delete" ConfirmText="Are you sure you would like to delete this notification?" HeaderStyle-Width="50px" />
                        <telerik:GridBoundColumn DataField="Active" HeaderText="Active" UniqueName="Active" SortExpression="Active" HeaderStyle-Width="50px" />
                        <telerik:GridBoundColumn DataField="Market" HeaderText="Market / Scenario" UniqueName="Market" SortExpression="Market" HeaderStyle-Width="150px" />
                        <telerik:GridBoundColumn DataField="Email" HeaderText="Email" UniqueName="Email" SortExpression="Email"  HeaderStyle-Width="300px"/>
                        <telerik:GridBoundColumn DataField="StartHour" HeaderText="StartHour" UniqueName="StartHour" SortExpression="StartHour" HeaderStyle-Width="75px" />
                        <telerik:GridBoundColumn DataField="EndHour" HeaderText="EndHour" UniqueName="EndHour" SortExpression="EndHour" HeaderStyle-Width="75px" />
                        <telerik:GridBoundColumn DataField="Min_Erlang" HeaderText="Min Erlang" UniqueName="Min_Erlang" SortExpression="Min_Erlang" HeaderStyle-Width="75px" />
                        <telerik:GridBoundColumn DataField="Min_Avg_Erlang" HeaderText="Min Avg Erlang" UniqueName="Min_Avg_Erlang" SortExpression="Min_Avg_Erlang" HeaderStyle-Width="100px" />
                        <telerik:GridBoundColumn DataField="STDEV_Erlang" HeaderText="STDEV Erlang" UniqueName="STDEV_Erlang" SortExpression="STDEV_Erlang" HeaderStyle-Width="100px" />
                        <telerik:GridBoundColumn DataField="Min_Atts" HeaderText="Min Atts" UniqueName="Min_Atts" SortExpression="Min_Atts" HeaderStyle-Width="75px" />
                        <telerik:GridBoundColumn DataField="STDEV_Atts" HeaderText="STDEV Atts" UniqueName="STDEV_Atts" SortExpression="STDEV_Atts" HeaderStyle-Width="75px" />
                        <telerik:GridBoundColumn DataField="P_Block" HeaderText="% Block" UniqueName="P_Block" SortExpression="P_Block" HeaderStyle-Width="75px" />
                        <telerik:GridBoundColumn DataField="STDEV_Block" HeaderText="STDEV Block" UniqueName="STDEV_Block" SortExpression="STDEV_Block" HeaderStyle-Width="100px" />
                        <telerik:GridBoundColumn DataField="P_IAs" HeaderText="% IAs" UniqueName="P_IAs" SortExpression="P_IAs" HeaderStyle-Width="75px" />
                        <telerik:GridBoundColumn DataField="STDEV_IAs" HeaderText="STDEV IAs" UniqueName="STDEV_IAs" SortExpression="STDEV_IAs" HeaderStyle-Width="75px" />
                        <telerik:GridBoundColumn DataField="P_Drop" HeaderText="% Drop" UniqueName="P_Drop" SortExpression="P_Drop" HeaderStyle-Width="75px" />
                        <telerik:GridBoundColumn DataField="STDEV_Drop" HeaderText="STDEV Drop" UniqueName="STDEV_Drop" SortExpression="STDEV_Drop" HeaderStyle-Width="100px" />
                    </Columns>
                    <EditFormSettings FormStyle-Width="600" UserControlName="NotificationEdit.ascx" EditFormType="WebUserControl"  />
                </MasterTableView>
                <HeaderStyle Wrap="false" />
                <ClientSettings Scrolling-AllowScroll="true" Scrolling-UseStaticHeaders="true" />
                <AlternatingItemStyle BackColor="#c9fca3" />
            </telerik:RadGrid>
        </ContentTemplate>
    </asp:UpdatePanel>

NotificationEdit.ascx:

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="NotificationEdit.ascx.cs" Inherits="NotificationEdit" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<div style="position:relative; height:315px; border: solid 1px #4EB106;">
    <table style="position:relative; top:10px; left:10px; border: solid 1px #4EB106;" cellspacing="2" cellpadding="2">
        <tr>
            <td valign="top">

                <!-- Form inputs here, removed for brevity -->

            </td>
        </tr>
    </table>

    <div style="position:relative; top:17px; left:10px; height:17px;">
        <asp:Label ID="inputValidationErrorMessage" runat="server" Text="Validation OK" ForeColor="Green" />
    </div>

    <div style="position:relative; top:20px; left:10px;">
        <asp:LinkButton ID="updateButton" runat="server" Text="Update" CommandName="Update" Visible="<%# !(DataItem is Telerik.Web.UI.GridInsertionObject) %>" />
        <asp:LinkButton ID="insertButton" runat="server" Text="Insert" CommandName="PerformInsert" Visible="<%# (DataItem is Telerik.Web.UI.GridInsertionObject) %>" />
        <asp:LinkButton ID="cancelButton" runat="server" Text="Cancel" CommandName="Cancel" CausesValidation="false" />
    </div>

</div>

I have tried many different tweaks to fix this, but nothing has works thus far. I have even examined the generated HTML / CSS and still can't figure out why the EditForm is showing outside of the RadGrid.

Thanks to anybody who may be able to provide insight on this issue.

Regards,

Kyle

[Martin]

Hello Kyle,

I tried to reproduce the issue but your code runs as expected on my side. I would suggest you to open an support ticket and send us a simplified sample project demonstrating the erroneous behavior. This way we will be able to debug it locally and provide you with an appropriate solution.

I hope this helps

Regards,
Martin
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.