RadGrid + EditFormType="WebUserControl" window size issue

[Jacques]

Hey there guys,

We're using a RadGrid to display a list of records. When the user clicks the edit button we're using a UserControl as the input form so the EditFormType is set to WebUserControl. We also have a RadWindowManager on the page.

The problem is that we're not sure how to set the width and height of the window.
We've tried setting it with CSS, which doesn't work.
We've tried setting it using the RadWindow manager but that didn't work either.

Here's the source:

<telerik:RadGrid ID="RecordList" runat="server" AllowPaging="True" EnableEmbeddedBaseStylesheet="False"
    GroupingEnabled="False" ShowStatusBar="True" DataSourceID="RecordsDataSource"
    GridLines="None" ShowFooter="True" OnItemDeleted="RecordList_ItemDeleted"
    OnItemUpdated="RecordList_ItemUpdated" OnUpdateCommand="RecordList_UpdateCommand"
    AllowSorting="True" OnInsertCommand="RecordList_InsertCommand" OnItemCommand="RecordList_ItemCommand"
    OnItemInserted="RecordList_ItemInserted" OnDeleteCommand="RecordList_DeleteCommand"
    OnItemDataBound="RecordList_ItemDataBound" OnNeedDataSource="RecordList_NeedDataSource"
     Skin="CustomHay" EnableEmbeddedSkins="false">
    <PagerStyle EnableSEOPaging="True" Mode="Slider" Position="TopAndBottom" />
    <MasterTableView  AutoGenerateColumns="False" DataSourceID="RecordsDataSource" EditMode="PopUp"
        NoDetailRecordsText="No child records to display." NoMasterRecordsText="No records to display."
        Summary="testing summary" DataKeyNames="RecordId" EditFormSettings-EditFormType="WebUserControl"
        EditFormSettings-UserControlName="~/DesktopModules/Records/RecordEditor.ascx"
        ShowFooter="True" InsertItemDisplay="Bottom" CommandItemDisplay="TopAndBottom">
        <CommandItemSettings AddNewRecordText="Add Record" />
        <RowIndicatorColumn Visible="False">
            <HeaderStyle Width="20px"></HeaderStyle>
        </RowIndicatorColumn>
        <ExpandCollapseColumn Visible="False" Resizable="False">
            <HeaderStyle Width="20px"></HeaderStyle>
        </ExpandCollapseColumn>
        <Columns>
            <telerik:GridBoundColumn DataField="RecordId" DataType="System.Int32" HeaderText="RecordId"
                SortExpression="RecordId" UniqueName="RecordId" Visible="False">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="RecordName" HeaderText="Record Name" SortExpression="RecordName"
                UniqueName="RecordName">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="Submissions" DataType="System.Int32" HeaderText="Submissions"
                SortExpression="Submissions" UniqueName="Submissions">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="ContactRequests" DataType="System.Int32" HeaderText="Contact Requests"
                SortExpression="ContactRequests" UniqueName="ContactRequests">
            </telerik:GridBoundColumn>
            <telerik:GridCheckBoxColumn DataField="SendSubmissionNotification" DataType="System.Boolean"
                HeaderText="SendSubmissionNotification" SortExpression="SendSubmissionNotification"
                UniqueName="SendSubmissionNotification" Visible="False">
            </telerik:GridCheckBoxColumn>
            <telerik:GridBoundColumn DataField="NotificationRecipientsEmailAddresses" HeaderText="NotificationRecipientsEmailAddresses"
                SortExpression="NotificationRecipientsEmailAddresses" UniqueName="NotificationRecipientsEmailAddresses"
                Visible="False">
            </telerik:GridBoundColumn>
            <telerik:GridCheckBoxColumn DataField="AllowContactMeEntry" DataType="System.Boolean"
                HeaderText="AllowContactMeEntry" SortExpression="AllowContactMeEntry" UniqueName="AllowContactMeEntry"
                Visible="False">
            </telerik:GridCheckBoxColumn>
            <telerik:GridBoundColumn DataField="ContactMeRecipientsEmailAddresses" HeaderText="ContactMeRecipientsEmailAddresses"
                SortExpression="ContactMeRecipientsEmailAddresses" UniqueName="ContactMeRecipientsEmailAddresses"
                Visible="False">
            </telerik:GridBoundColumn>
            <telerik:GridCheckBoxColumn DataField="IsEnabled" DataType="System.Boolean" HeaderText="Enabled"
                SortExpression="IsEnabled" UniqueName="IsEnabled">
            </telerik:GridCheckBoxColumn>
            <telerik:GridBoundColumn DataField="DateCreated" DataType="System.DateTime" HeaderText="Created"
                SortExpression="DateCreated" UniqueName="DateCreated" DataFormatString="{0:yyyy, MMM dd}">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="DateModified" HeaderText="DateModified" SortExpression="DateModified"
                UniqueName="DateModified" DataType="System.DateTime" Visible="False">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="CreatedByUserId" HeaderText="CreatedByUserId"
                SortExpression="CreatedByUserId" UniqueName="CreatedByUserId" DataType="System.Guid"
                Visible="False">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="ModifiedByUserId" HeaderText="ModifiedByUserId"
                SortExpression="ModifiedByUserId" UniqueName="ModifiedByUserId" DataType="System.Guid"
                Visible="False">
            </telerik:GridBoundColumn>
            <telerik:GridEditCommandColumn>
                <ItemStyle Width="20px"  />
            </telerik:GridEditCommandColumn>
            <telerik:GridButtonColumn CommandName="Delete" ConfirmDialogType="RadWindow" ConfirmText="Are you sure you would like to delete this record?"
                ConfirmTitle="Delete Record" Text="Delete" UniqueName="DeleteColumn">
                <ItemStyle Width="20px" />
            </telerik:GridButtonColumn>
            <telerik:GridHyperLinkColumn DataNavigateUrlFields="RecordId" Text="Questions" UniqueName="QuestionsColumn">
                <ItemStyle Width="30px" />
            </telerik:GridHyperLinkColumn>
            <telerik:GridHyperLinkColumn DataNavigateUrlFields="RecordId" Text="Results" UniqueName="ResultsColumn">
                <ItemStyle Width="30px" />
            </telerik:GridHyperLinkColumn>
            <telerik:GridButtonColumn ButtonType="LinkButton" CommandName="Flush" ConfirmDialogType="RadWindow" ConfirmTitle="Flush Collected Data" ConfirmText="Are you sure you would like to flush the collected data for this record" Text="Flush">
            </telerik:GridButtonColumn>
        </Columns>
        <NoRecordsTemplate>
            No records have been created yet.</NoRecordsTemplate>
        <EditFormSettings EditFormType="WebUserControl" UserControlName="~/DesktopModules/Records/RecordEditor.ascx"
            CaptionDataField="RecordName">
            <EditColumn UniqueName="EditCommandColumn1"  HeaderButtonType="TextButton">
            </EditColumn>
            <PopUpSettings ScrollBars="None" />
        </EditFormSettings>
        <PagerStyle Mode="Slider" />
    </MasterTableView>
    <ClientSettings EnableRowHoverStyle="True">
        <Selecting AllowRowSelect="True" />
    </ClientSettings>
    <StatusBarSettings LoadingText="Loading..." ReadyText="Ready" />
</telerik:RadGrid>
<telerik:RadWindowManager ID="RadWindowManager" Height="150" Width="581" Skin="Hay" runat="server" KeepInScreenBounds="true">
</telerik:RadWindowManager>

Any help would be appreciated.

Thanks,
Jacques

[Yavor]

Hi J.Hov,

You can set the dimensions for the popup in the popup settings:

<EditFormSettings>
<PopUpSettings Height="120" Width="200" />
</EditFormSettings>

I hope this helps.

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

[Jacques]

Hi Yavor, 

Thanks for the answer. 

What about the position of the popup and perhaps setting the window to modal? 

Regards,

Jacques

[Princy]

Hello Jaques,

You can set the EditFormSettings>PopUpSettings>Modal property to true as shown below:
aspx:

<EditFormSettings>
<PopUpSettings Height="120px" Width="200px" Modal="true" />
</EditFormSettings>

To set the position of the pop up form refer to the following document:
Center PopUp edit form in RadGrid

Thanks
Princy.

[fransiscus agung]

Hi Telerik,

I'm facing an issue related to popup window height. I set my RadGrid EditMode=PopUp, EditFormType = Template. Within FormTemplate I put text boxes along with its field validator, validation summary and Save button (that trigger the validation)

The issue is the popup height is not extended automatically when the validation summary is listing any error message: My most bottom controls are now hang out outside the border.

I found same issue but no solution for this yet. Could you help, please.

Regards,
Agung

P.S.

• I'm evaluating RadControls for ASP.NET AJAX Q2 2012 SP2.
• It is possible to set the popup height on a certain value to provide space for the validation summary. But It will be better to have the height dynamically adjusted at that circumstance I think.

[Pavlina]

Hi Fransiscus,

Can you send us a simple running project demonstrating the problem (and step-by-step instructions on doing so)? In that way we can reproduce and pinpoint the problems you're facing on our side, understand the logic of your application and provide a solution.

All the best,
Pavlina
the Telerik team

[fransiscus agung]

Hi Pavlina,

Attached are the source code and screen capture of the problem on .png files. I'm unable to attach any zip file.

Hope it is helpful for the investigation.

Regards,
Agung

P.S. I also pasted the code below for ease

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .MyImageButton
        {
            cursor: hand;
        }
        .EditFormHeader td
        {
            font-size: 14px;
            padding: 4px !important;
            color: #0066cc;
        }
    </style>
    <telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" />
</head>
<body>
    <h2>
        Customer Maintenance</h2>
    <br />
    <form id="form1" runat="server">
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        <Scripts>
            <%--Needed for JavaScript IntelliSense in VS2010--%>
            <%--For VS2008 replace RadScriptManager with ScriptManager--%>
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
        </Scripts>
    </telerik:RadScriptManager>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" />
    <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server">
        <telerik:RadGrid ID="RadGrid1" GridLines="None" runat="server" AllowAutomaticDeletes="True"
            AllowSorting="False" AllowAutomaticInserts="True" PageSize="10" AllowAutomaticUpdates="True"
            AllowMultiRowEdit="False" AllowPaging="False" DataSourceID="DataSource1" OnItemUpdated="RadGrid1_ItemUpdated"
            AllowFilteringByColumn="False" OnItemDeleted="RadGrid1_ItemDeleted" OnItemInserted="RadGrid1_ItemInserted"
            OnDataBound="RadGrid1_DataBound">
            <PagerStyle Mode="NextPrevAndNumeric" />
            <MasterTableView Width="100%" CommandItemDisplay="TopAndBottom" DataKeyNames="Firstname"
                DataSourceID="DataSource1" HorizontalAlign="NotSet" EditMode="PopUp">
                <Columns>
                    <telerik:GridEditCommandColumn ButtonType="ImageButton" UniqueName="EditCommandColumn">
                        <ItemStyle CssClass="MyImageButton" />
                    </telerik:GridEditCommandColumn>
                    <telerik:GridButtonColumn ConfirmText="Delete this product?" ConfirmDialogType="RadWindow"
                        ConfirmTitle="Delete" ButtonType="ImageButton" CommandName="Delete" Text="Delete"
                        UniqueName="DeleteColumn">
                        <ItemStyle HorizontalAlign="Center" CssClass="MyImageButton" />
                    </telerik:GridButtonColumn>
                </Columns>
                <EditFormSettings EditFormType="Template">
                    <PopUpSettings Modal="true" />
                    <FormTemplate>
                        <table>
                            <tr>
                                <td>
                                    <label>
                                        FirstName</label>
                                </td>
                                <td>
                                    <telerik:RadTextBox ID="txtFirtname" runat="server" Text='<%# Bind("FirstName") %>'>
                                    </telerik:RadTextBox>
                                    <asp:RequiredFieldValidator ID="reqFirstName" runat="server" ErrorMessage="Firstname should be set"
                                        ForeColor="Red" Text="*" ControlToValidate="txtFirtname" ValidationGroup="save"></asp:RequiredFieldValidator>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <label>
                                        MiddleName</label>
                                </td>
                                <td>
                                    <telerik:RadTextBox ID="txtMiddleName" runat="server" Text='<%# Bind("MiddleName") %>'>
                                    </telerik:RadTextBox>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <label>
                                        LastName</label>
                                </td>
                                <td>
                                    <telerik:RadTextBox ID="txtLastName" runat="server" Text='<%# Bind("LastName") %>'>
                                    </telerik:RadTextBox>
                                    <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="Lastname should be set"
                                        ForeColor="Red" Text="*" ControlToValidate="txtLastName" ValidationGroup="save"></asp:RequiredFieldValidator>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="2">
                                    <asp:ValidationSummary EnableViewState="false" ID="ValidationSummary1" runat="server"
                                        CssClass="ValidationSummary" ValidationGroup="save" />
                                    <asp:Literal ID="FailureText" runat="server"></asp:Literal>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                </td>
                                <td>
                                    <telerik:RadButton ID="btnSave" runat="server" ValidationGroup='<%# (Container is GridEditFormInsertItem) ? "save" : "" %>'
                                        CommandName='<%# (Container is GridEditFormInsertItem) ? "PerformInsert" : "Update" %>'
                                        Text='<%# (Container is GridEditFormInsertItem) ? "Insert" : "Update" %>' ToolTip='<%# (Container is GridEditFormInsertItem) ? "Insert new Customer" : "Save the changes" %>'>
                                    </telerik:RadButton>
                                    <telerik:RadButton ID="btnCancel" runat="server" CausesValidation="false" CommandName="Cancel"
                                        Text="Cancel" ToolTip="Cancel changes">
                                    </telerik:RadButton>
                                </td>
                            </tr>
                        </table>
                    </FormTemplate>
                </EditFormSettings>
            </MasterTableView>
        </telerik:RadGrid>
        <telerik:RadWindowManager ID="RadWindowManager1" runat="server">
        </telerik:RadWindowManager>
    </telerik:RadAjaxPanel>
    <asp:ObjectDataSource SelectMethod="GetCustomerList" UpdateMethod="Update" InsertMethod="Insert"
        DeleteMethod="Delete" TypeName="RadGridPopUpHeightProblemWithValSummary.CustomerMaintenanceService"
        ID="DataSource1" runat="server">
        <UpdateParameters>
            <asp:Parameter Name="c" Type="Object" />
        </UpdateParameters>
        <DeleteParameters>
            <asp:Parameter Name="c" Type="Object" />
        </DeleteParameters>
        <InsertParameters>
            <asp:Parameter Name="c" Type="Object" />
        </InsertParameters>
    </asp:ObjectDataSource>
    </form>
</body>
</html>

The service

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace RadGridPopUpHeightProblemWithValSummary
{
    public class CustomerMaintenanceService
    {
        public List<Customer> GetCustomerList()
        {
            List<Customer> list = new List<Customer>();

            Customer c = new Customer();
            c.FirstName = "John";
            c.LastName = "Doe";
            c.DoB = new DateTime(1970, 1, 1);
            list.Add(c);

            return list;
        }

        public void Insert(Customer c)
        {
            throw new NotImplementedException();
        }

        public void Update(Customer c)
        {
            throw new NotImplementedException();

        }

        public void Delete(Customer c)
        {
            throw new NotImplementedException();
        }
    }
}

The Entity:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace RadGridPopUpHeightProblemWithValSummary
{
    public partial class Customer
    {
        // mandatory
        public string FirstName { get; set; }

        //optional
        public string MiddleName { get; set; }

        //mandatory
        public string LastName { get; set; }

        public DateTime DoB { get; set; }
    }
}

[Pavlina]

Hi,

You can try to upload the project on public site and send us the transfer link. Providing a live url will also help us to investigate the problem.

Regards,
Pavlina
the Telerik team

[fransiscus agung]

Hi Pavlina,
 
Please take a look at this link. Hope it is easy to understand - that is the problem I'm discussing. Please let me know if it is still unclear.

My code is so that simple: a CRUDGrid, edit mode PopUp with a validation summary. I've pasted the code on my previous reply.

Appreciate for your help.

Regards,
Agung

[Pavlina]

Hi Agung,

I recommend that you go through the forum thread below which elaborates on this matter and see if it works for you:
http://www.telerik.com/community/forums/aspnet-ajax/grid/editformsettings-modal-not-rendering-the-correct-height-on-initial-load.aspx

Regards,
Pavlina
the Telerik team

[fransiscus agung]

Hi Pavlina,

The solution is working for me. I'm using IE9.

.RadGrid .rgEditForm
{
    height: auto !important;
}

.RadGrid .rgEditForm > .rgHeader + div
{
    height: auto !important;
}

Thank you.

Regards,
Agung.