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

PopUp FormTemplate gets all jacked up when using ValidationSummary control

1 Answer 42 Views
Grid
This is a migrated thread and some comments may be shown as answers.
David
Top achievements
Rank 1
David asked on 24 Sep 2014, 07:12 PM
I placed a ValidationSummary control in my form template. When a validation message is displayed the size of the popup window does not increase nor do scroll bars appear. Instead it pushes other controls off the form (see screenshot).

You may duplicate this issue by replacing the aspx page in the Telerik's demo page for "Grid/Data Editing/Form Template Edit Form" with the following:

<%@ Page Language="C#" CodeFile="DefaultCS.aspx.cs" Inherits="Grid.Examples.DataEditing.TemplateFormUpdate.DefaultCS"
    MasterPageFile="~/MasterPage.master" %>
 
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <p id="divMsgs" runat="server">
        <asp:Label ID="Label1" runat="server" EnableViewState="False" Font-Bold="True" ForeColor="#FF8080">
        </asp:Label>
        <asp:Label ID="Label2" runat="server" EnableViewState="False" Font-Bold="True" ForeColor="#00C000">
        </asp:Label>
    </p>
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script type="text/javascript">
            function RowDblClick(sender, eventArgs) {
                sender.get_masterTableView().editItem(eventArgs.get_itemIndexHierarchical());
            }
        </script>
    </telerik:RadCodeBlock>
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadGrid1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1">
                    </telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="divMsgs"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
    </telerik:RadAjaxLoadingPanel>
    <telerik:RadGrid ID="RadGrid1" runat="server" CssClass="RadGrid" GridLines="None"
        AllowPaging="True" PageSize="20" AllowSorting="True" AutoGenerateColumns="False"
        ShowStatusBar="true" AllowAutomaticDeletes="True" AllowAutomaticInserts="True"
        AllowAutomaticUpdates="True" DataSourceID="SqlDataSource1" OnItemDeleted="RadGrid1_ItemDeleted"
        OnItemInserted="RadGrid1_ItemInserted" OnItemUpdated="RadGrid1_ItemUpdated" OnItemCommand="RadGrid1_ItemCommand"
        OnPreRender="RadGrid1_PreRender">
        <MasterTableView CommandItemDisplay="TopAndBottom" DataSourceID="SqlDataSource1"
            DataKeyNames="EmployeeID" EditMode="PopUp">
            <Columns>
                <telerik:GridEditCommandColumn>
                </telerik:GridEditCommandColumn>
                <telerik:GridBoundColumn UniqueName="EmployeeID" HeaderText="ID" DataField="EmployeeID">
                    <HeaderStyle ForeColor="Silver" Width="20px"></HeaderStyle>
                    <ItemStyle ForeColor="Gray"></ItemStyle>
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn UniqueName="TitleOfCourtesy" HeaderText="TOC" DataField="TitleOfCourtesy">
                    <HeaderStyle Width="60px"></HeaderStyle>
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn UniqueName="FirstName" HeaderText="FirstName" DataField="FirstName">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn UniqueName="LastName" HeaderText="LastName" DataField="LastName">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn UniqueName="HireDate" HeaderText="Hire Date" DataField="HireDate"
                    DataFormatString="{0:d}">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn UniqueName="Title" HeaderText="Title" DataField="Title">
                </telerik:GridBoundColumn>
                <telerik:GridButtonColumn CommandName="Delete" Text="Delete" UniqueName="column">
                </telerik:GridButtonColumn>
            </Columns>
            <EditFormSettings EditFormType="Template" PopUpSettings-Width="800px">
                <FormTemplate>
                    <asp:ValidationSummary ID="ValidationSummary1" runat="server" />
                    <table id="Table2" cellspacing="2" cellpadding="1" width="100%" border="0" rules="none"
                        style="border-collapse: collapse;">
                        <tr class="EditFormHeader">
                            <td colspan="2" style="font-size: small">
                                <b>Employee Details</b>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                <b>Company Info:</b>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <table id="Table3" cellspacing="1" cellpadding="1" width="250" border="0" class="module">
                                    <tr>
                                        <td>
                                        </td>
                                        <td>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            Country:
                                        </td>
                                        <td>
                                            <asp:TextBox ID="TextBox7" runat="server" Text='<%# Bind("Country") %>'>
                                            </asp:TextBox>
                                            <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="Country Required" ControlToValidate="TextBox7"></asp:RequiredFieldValidator>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            City:
                                        </td>
                                        <td>
                                            <asp:TextBox ID="TextBox8" runat="server" Text='<%# Bind("City") %>' TabIndex="1">
                                            </asp:TextBox>
                                            <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ErrorMessage="City Required" ControlToValidate="TextBox8"></asp:RequiredFieldValidator>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            Region:
                                        </td>
                                        <td>
                                            <asp:TextBox ID="TextBox9" runat="server" Text='<%# Bind("Region") %>' TabIndex="2">
                                            </asp:TextBox>
                                            <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ErrorMessage="Region Required" ControlToValidate="TextBox9"></asp:RequiredFieldValidator>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            Home Phone:
                                        </td>
                                        <td>
                                            <telerik:RadMaskedTextBox ID="HomePhoneBox" runat="server" SelectionOnFocus="SelectAll"
                                                Text='<%# Bind("HomePhone") %>' PromptChar="_" Width="300px" Mask="(###) ###-####"
                                                TabIndex="3">
                                            </telerik:RadMaskedTextBox>
                                            <asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" ErrorMessage="Home Phone Required" ControlToValidate="HomePhoneBox"></asp:RequiredFieldValidator>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            Birth Date:
                                        </td>
                                        <td>
                                            <telerik:RadDatePicker ID="BirthDatePicker" runat="server" MinDate="1/1/1900" DbSelectedDate='<%# Bind("BirthDate") %>'
                                                TabIndex="4">
                                            </telerik:RadDatePicker>
                                            <asp:RequiredFieldValidator ID="RequiredFieldValidator5" runat="server" ErrorMessage="Birth Date Required" ControlToValidate="BirthDatePicker"></asp:RequiredFieldValidator>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            Title Of Courtesy
                                        </td>
                                        <td>
                                            <asp:DropDownList ID="ddlTOC" runat="server" SelectedValue='<%# Bind("TitleOfCourtesy") %>'
                                                DataSource='<%# (new string[] { "Dr.", "Mr.", "Mrs.", "Ms." }) %>' TabIndex="7"
                                                AppendDataBoundItems="True">
                                                <asp:ListItem Selected="True" Text="Select" Value="">
                                                </asp:ListItem>
                                            </asp:DropDownList>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                            <td>
                                <table id="Table1" cellspacing="1" cellpadding="1" width="250" border="0" class="module">
                                    <tr>
                                        <td>
                                            Notes:
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <asp:TextBox ID="TextBox1" Text='<%# Bind("Notes") %>' runat="server" TextMode="MultiLine"
                                                Rows="5" Columns="40" TabIndex="5">
                                            </asp:TextBox>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            Address:
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <asp:TextBox ID="TextBox6" Text='<%# Bind("Address") %>' runat="server" TextMode="MultiLine"
                                                Rows="2" Columns="40" TabIndex="6">
                                            </asp:TextBox>
                                            <asp:RequiredFieldValidator ID="RequiredFieldValidator6" runat="server" ErrorMessage="Address Required" ControlToValidate="TextBox6"></asp:RequiredFieldValidator>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                <b>Personal Info:</b>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <table id="Table4" cellspacing="1" cellpadding="1" width="250" border="0" class="module">
                                    <tr>
                                        <td>
                                            FirstName:
                                        </td>
                                        <td>
                                            <asp:TextBox ID="TextBox2" Text='<%# Bind( "FirstName") %>' runat="server" TabIndex="8">
                                            </asp:TextBox>
                                            <asp:RequiredFieldValidator ID="RequiredFieldValidator7" runat="server" ErrorMessage="First Name Required" ControlToValidate="TextBox2"></asp:RequiredFieldValidator>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            Last Name:
                                        </td>
                                        <td>
                                            <asp:TextBox ID="TextBox3" Text='<%# Bind( "LastName") %>' runat="server" TabIndex="9">
                                            </asp:TextBox>
                                            <asp:RequiredFieldValidator ID="RequiredFieldValidator8" runat="server" ErrorMessage="Last Name Required" ControlToValidate="TextBox3"></asp:RequiredFieldValidator>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            Hire Date:
                                        </td>
                                        <td>
                                            <telerik:RadDatePicker ID="HireDatePicker" DbSelectedDate='<%# Bind( "HireDate") %>'
                                                runat="server" TabIndex="10">
                                            </telerik:RadDatePicker>
                                            <asp:RequiredFieldValidator ID="RequiredFieldValidator9" runat="server" ErrorMessage="Hire Date Required" ControlToValidate="HireDatePicker"></asp:RequiredFieldValidator>
                                             
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            Title:
                                        </td>
                                        <td>
                                            <asp:TextBox ID="TextBox4" Text='<%# Bind( "Title") %>' runat="server" TabIndex="11">
                                            </asp:TextBox>
                                            <asp:RequiredFieldValidator ID="RequiredFieldValidator10" runat="server" ErrorMessage="Title Required" ControlToValidate="TextBox4"></asp:RequiredFieldValidator>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                            <td>
                            </td>
                        </tr>
                        <tr>
                            <td align="right" colspan="2">
                                <asp:Button ID="btnUpdate" Text='<%# (Container is GridEditFormInsertItem) ? "Insert" : "Update" %>'
                                    runat="server" CommandName='<%# (Container is GridEditFormInsertItem) ? "PerformInsert" : "Update" %>'>
                                </asp:Button
                                <asp:Button ID="btnCancel" Text="Cancel" runat="server" CausesValidation="False"
                                    CommandName="Cancel"></asp:Button>
                            </td>
                        </tr>
                    </table>
                </FormTemplate>
            </EditFormSettings>
        </MasterTableView>
        <ClientSettings>
            <ClientEvents OnRowDblClick="RowDblClick"></ClientEvents>
        </ClientSettings>
    </telerik:RadGrid>
    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:TelerikConnectionString35 %>"
        DeleteCommand="DELETE FROM [Employees_Northwind] WHERE [EmployeeID] = @EmployeeID"
        InsertCommand="INSERT INTO [Employees_Northwind] ([LastName], [FirstName], [Title], [TitleOfCourtesy], [BirthDate], [HireDate], [Address], [City], [Region], [Country], [HomePhone], [Notes], [ReportsTo]) VALUES (@LastName, @FirstName, @Title, @TitleOfCourtesy, @BirthDate, @HireDate, @Address, @City, @Region, @Country, @HomePhone, @Notes, @ReportsTo)"
        SelectCommand="SELECT * FROM [Employees_Northwind]" UpdateCommand="UPDATE [Employees_Northwind] SET [LastName] = @LastName, [FirstName] = @FirstName, [Title] = @Title, [TitleOfCourtesy] = @TitleOfCourtesy, [BirthDate] = @BirthDate, [HireDate] = @HireDate, [Address] = @Address, [City] = @City, [Region] = @Region, [Country] = @Country, [HomePhone] = @HomePhone, [Notes] = @Notes WHERE [EmployeeID] = @EmployeeID">
        <DeleteParameters>
            <asp:Parameter Name="EmployeeID" Type="Int32"></asp:Parameter>
        </DeleteParameters>
        <InsertParameters>
            <asp:Parameter Name="LastName" Type="String"></asp:Parameter>
            <asp:Parameter Name="FirstName" Type="String"></asp:Parameter>
            <asp:Parameter Name="Title" Type="String"></asp:Parameter>
            <asp:Parameter Name="TitleOfCourtesy" Type="String"></asp:Parameter>
            <asp:Parameter Name="BirthDate" Type="DateTime"></asp:Parameter>
            <asp:Parameter Name="HireDate" Type="DateTime"></asp:Parameter>
            <asp:Parameter Name="Address" Type="String"></asp:Parameter>
            <asp:Parameter Name="City" Type="String"></asp:Parameter>
            <asp:Parameter Name="Region" Type="String"></asp:Parameter>
            <asp:Parameter Name="Country" Type="String"></asp:Parameter>
            <asp:Parameter Name="HomePhone" Type="String"></asp:Parameter>
            <asp:Parameter Name="Notes" Type="String"></asp:Parameter>
            <asp:Parameter Name="ReportsTo" Type="Int32" DefaultValue=""></asp:Parameter>
        </InsertParameters>
        <UpdateParameters>
            <asp:Parameter Name="LastName" Type="String"></asp:Parameter>
            <asp:Parameter Name="FirstName" Type="String"></asp:Parameter>
            <asp:Parameter Name="Title" Type="String"></asp:Parameter>
            <asp:Parameter Name="TitleOfCourtesy" Type="String"></asp:Parameter>
            <asp:Parameter Name="BirthDate" Type="DateTime"></asp:Parameter>
            <asp:Parameter Name="HireDate" Type="DateTime"></asp:Parameter>
            <asp:Parameter Name="Address" Type="String"></asp:Parameter>
            <asp:Parameter Name="City" Type="String"></asp:Parameter>
            <asp:Parameter Name="Region" Type="String"></asp:Parameter>
            <asp:Parameter Name="Country" Type="String"></asp:Parameter>
            <asp:Parameter Name="HomePhone" Type="String"></asp:Parameter>
            <asp:Parameter Name="Notes" Type="String"></asp:Parameter>
            <asp:Parameter Name="EmployeeID" Type="Int32"></asp:Parameter>
        </UpdateParameters>
    </asp:SqlDataSource>
    <br />
</asp:Content>


1 Answer, 1 is accepted

Sort by
0
Konstantin Dikov
Telerik team
answered on 29 Sep 2014, 08:30 AM
Hello David,

Thank you for providing an easy for testing code.

Before moving to the solution, let me start by saying that with PopUp edit mode, when the popup opens, by default it has fixed height, so when you add additional content dynamically, it is more or less expected that there will be an issue with the height.

However, there is an easy way for enabling scroll bars for the popup window by setting the PopUpSettings-ScrollBars property to "Auto" or "Vertical":
<EditFormSettings EditFormType="Template" PopUpSettings-Width="800px" PopUpSettings-ScrollBars="Vertical">

Please try this on your end and let me know if everything works as expected when the validation messages are displayed.


Regards,
Konstantin Dikov
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
Grid
Asked by
David
Top achievements
Rank 1
Answers by
Konstantin Dikov
Telerik team
Share this question
or