WebUserControl popup not resizing properly to content height variations

8 posts, 1 answers
  1. dstj
    dstj avatar
    82 posts
    Member since:
    Oct 2006

    Posted 13 May 2009 Link to this post

    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.
  2. Answer
    Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 18 May 2009 Link to this post

    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 /> 
                    <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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. dstj
    dstj avatar
    82 posts
    Member since:
    Oct 2006

    Posted 20 May 2009 Link to this post

    Thanks a lot, that CSS rules did the trick !
  5. Neha
    Neha avatar
    21 posts
    Member since:
    Jan 2011

    Posted 12 Apr 2011 Link to this post

    Thanks ! it saved my day :)
  6. Shawn Clabough
    Shawn Clabough avatar
    17 posts
    Member since:
    Jun 2004

    Posted 05 Oct 2011 Link to this post

    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>

  7. Shawn Clabough
    Shawn Clabough avatar
    17 posts
    Member since:
    Jun 2004

    Posted 05 Oct 2011 Link to this post

    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.
  8. Shawn Clabough
    Shawn Clabough avatar
    17 posts
    Member since:
    Jun 2004

    Posted 07 Oct 2011 Link to this post

    With the previous style, it wouldn't auto size the first time the window opened.  Only when I used these two styles would it have the correct size every time it opened.

    .RadGrid .rgEditForm
    {
        height: auto !important;
    }
     
    .RadGrid .rgEditForm > .rgHeader + div
    {
        height: auto !important;
    }
  9. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 10 Oct 2011 Link to this post

    Hi Shawn Clabough,

    Please, refer to the support ticket post for additional information. To avoid duplicate posts, I suggest that we continue our communication there.

    Greetings,
    Pavlina
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017