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

WebUserControl popup not resizing properly to content height variations

7 Answers 440 Views

Grid

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

dstj asked on 13 May 2009, 04:21 PM

Hi,

Using v2009.1.402.35, I use a WebUsercontrol popup to insert/edit record in a grid. In that popup, I have a <div> on which I toggle the css "display" property.

My problem is that the "background" window is not resizing properly to accommodate the new height of the control. The result is that the content overflows under the window.

    
            <EditFormSettings EditFormType="WebUserControl" UserControlName="~/UserControls/TelerikHelpers/ExtraQuestionPopup.ascx" 
        
               CaptionFormatString="Edit extra question: {0}" CaptionDataField="ShortLabel"> 
        
               <PopUpSettings Modal="true" Width="525px" /> 
        
            </EditFormSettings>

Is there a way to force the redrawing of the popup window so that it take into account to height variations when I toggle the div's display from "none" to "" ?

Thanks,

Dominic.

7 Answers, 1 is accepted

Accepted

answered on 18 May 2009, 10:42 AM

Hi Dominic,

You can use a CSS rule to make the popup edit form adjust automatically, according to the height of its content. Here is an example:

(we will try to improve the behavior of the popup edit form for future versions of RadGrid, so that this workaround is not needed)

    
            <%@ Page Language="C#" %> 
        
            <%@ Import Namespace="System.Data" %> 
        
            <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
        
            <script runat="server"> 
        
                protected void RadGrid_NeedDataSource(object sender, GridNeedDataSourceEventArgs e) 
        
                { 
        
                    DataTable dt = new DataTable(); 
        
                    DataRow dr; 
        
                    int colsNum = 5; 
        
                    int rowsNum = 10; 
        
                    string colName = "Column"; 
        
                    for (int j = 1; j <= colsNum; j++) 
        
                    { 
        
                        dt.Columns.Add(String.Format("{0}{1}", colName, j)); 
        
                    } 
        
                    for (int i = 1; i <= rowsNum; i++) 
        
                    { 
        
                        dr = dt.NewRow(); 
        
                        for (int k = 1; k <= colsNum; k++) 
        
                        { 
        
                            dr[String.Format("{0}{1}", colName, k)] = String.Format("{0}{1} Row{2}", colName, k, i); 
        
                        } 
        
                        dt.Rows.Add(dr); 
        
                    } 
        
                    (sender as RadGrid).DataSource = dt; 
        
                } 
        
            </script> 
        
            <!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"> 
        
            <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
        
            <title>RadControls for ASP.NET AJAX</title> 
        
            <style type="text/css"> 
        
            .RadGrid .rgEditForm>.rgHeader+div 
        
            { 
        
                height:auto !important; 
        
            } 
        
            </style> 
        
            </head> 
        
            <body> 
        
            <form id="form1" runat="server"> 
        
            <asp:ScriptManager ID="ScriptManager1" runat="server" /> 
        
            <telerik:RadGrid 
        
                ID="RadGrid1" 
        
                runat="server" 
        
                AutoGenerateEditColumn="true" 
        
                OnNeedDataSource="RadGrid_NeedDataSource"> 
        
                <MasterTableView EditMode="PopUp"> 
        
                    <EditFormSettings EditFormType="Template"> 
        
                        <FormTemplate> 
        
                        <div style="height:100px;border:1px solid red;margin:10px;"> 
        
                            FormTemplate 
        
                            <br /><br /> 
        
                            <a href="#" onclick="javascript:this.parentNode.style.height = this.parentNode.offsetHeight + 20 + 'px';return false;">expand FormTemplate</a> 
        
                        </div> 
        
                        </FormTemplate> 
        
                    </EditFormSettings> 
        
                </MasterTableView> 
        
            </telerik:RadGrid> 
        
            </form> 
        
            </body> 
        
            </html>

Best wishes,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

answered on 05 Oct 2011, 06:26 PM

FYI, This workaround is still necessary in 2011.2.915.40.

.RadGrid_Default .rgEditForm

{

height:auto !important;

}

Here's my markup that causes the Insert and Cancel links to be below the popup window.

<telerik:RadGrid ID="rgNewVocalSoloists" runat="server" AutoGenerateColumns="False" AutoGenerateDeleteColumn="True" CellSpacing="0" CssClass="rGrid" GridLines="None" Skin="Default">

<MasterTableView CommandItemDisplay="Bottom" EditMode="PopUp" InsertItemDisplay="Bottom">

<NoRecordsTemplate>

No Soloists Entered</NoRecordsTemplate>

<CommandItemSettings AddNewRecordText="Add Vocal Soloist" ShowRefreshButton="False" />

<RowIndicatorColumn FilterControlAltText="Filter RowIndicator column">

</RowIndicatorColumn>

<ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column">

</ExpandCollapseColumn>

<Columns>

<telerik:GridTemplateColumn DataField="Entrant" FilterControlAltText="Filter SoloistNameColumn column" HeaderText="Soloist Name" UniqueName="VocalSoloistNamesColumn">

<InsertItemTemplate>

<telerik:RadTextBox ID="rtbVocalSoloistName" runat="server" Columns="40">

</telerik:RadTextBox>

(Required)<br />

<asp:RequiredFieldValidator ID="RequiredFieldValidator20" runat="server" ControlToValidate="rtbVocalSoloistName" ErrorMessage="Soloist name is required"></asp:RequiredFieldValidator>

</InsertItemTemplate>

<ItemTemplate>

<asp:Label ID="lblVocalSoloistName" runat="server" Text='<%#Bind ("Entrant")%>'></asp:Label>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn DataField="VoiceType" FilterControlAltText="Filter SoloistVoiceColumn column" HeaderText="Voice" UniqueName="VocalSoloistVoiceColumn">

<InsertItemTemplate>

<asp:RadioButtonList ID="rblVocalSoloistVoice" runat="server" DataSourceID="VocalSoloistTypesDataSource" DataTextField="VoiceType" DataValueField="VoiceType">

</asp:RadioButtonList>

(Required)<br />

<asp:RequiredFieldValidator ID="RequiredFieldValidator13" runat="server" ControlToValidate="rblVocalSoloistVoice" ErrorMessage="Voice is required"></asp:RequiredFieldValidator>

</InsertItemTemplate>

<ItemTemplate>

<asp:Label ID="lblVocalSoloistVoice" runat="server" Text='<%#Bind ("Voice")%>'></asp:Label>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn DataField="ParticipatingMusicians" FilterControlAltText="Filter VocalParticipatingMusiciansColumn column" HeaderText="Participating Musicians" UniqueName="VocalSoloistParticipatingMusiciansColumn">

<InsertItemTemplate>

<telerik:RadTextBox ID="rtbVocalSoloistParticipatingMusicians" runat="server" Columns="40" Rows="3" TextMode="MultiLine">

</telerik:RadTextBox>

(Required)<br />

<asp:RequiredFieldValidator ID="RequiredFieldValidator16" runat="server" ControlToValidate="rtbVocalSoloistParticipatingMusicians" ErrorMessage="Participating Musicians is required. TBD may be used."></asp:RequiredFieldValidator>

</InsertItemTemplate>

<ItemTemplate>

<asp:Label ID="lblVocalSoloistParticipatingMusicians" runat="server" Text='<%#Bind ("ParticipatingMusicians")%>'></asp:Label>

</ItemTemplate>

</telerik:GridTemplateColumn>

</Columns>

<EditFormSettings InsertCaption="Enter the name of the soloist" PopUpSettings-Height="340px" PopUpSettings-Modal="true" PopUpSettings-ShowCaptionInEditForm="False">

<EditColumn FilterControlAltText="Filter EditCommandColumn column">

</EditColumn>

<PopUpSettings Modal="True" />

</EditFormSettings>

</MasterTableView>

<FilterMenu EnableImageSprites="False">

</FilterMenu>

<HeaderContextMenu CssClass="GridContextMenu GridContextMenu_Hay">

</HeaderContextMenu>

</telerik:RadGrid>

answered on 05 Oct 2011, 07:41 PM

PopUp.PNG

With further testing, it is only resizing correctly on the second and subsequent opening. The first time the popup shows, it is not autosizing. Like someone posted in this post http://www.telerik.com/community/forums/aspnet-ajax/grid/radgrid-popup-edit-form-size-problems.aspx

I've attached a screenshot that also shows some of the effective styles the element is getting.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

WebUserControl popup not resizing properly to content height variations

7 Answers, 1 is accepted