Entry overflow in edit mode

15 posts, 1 answers
  1. Rainer
    Rainer avatar
    18 posts
    Member since:
    Nov 2017

    Posted 28 Oct Link to this post

    Hello,

    if I press the edit button and the form template comes up modal the entry in the grid looks strange. See attachement.

    Best, Rainer

  2. Rumen
    Admin
    Rumen avatar
    14105 posts

    Posted 31 Oct Link to this post

    Hi Rainer,

    Thank you for the screenshots!

    Do you experience this appearance issue:

    • in IE or in all browsers? If it is IE related please disable the compatibility mode and retest.
    • if you set the RadGrid RenderMode property to Lightweight?
    • with the latest version of the control 2019.3.1023 (R3 2019 SP1)?
    • if you remove (disable) the CSS stylesheet of the page, since there could be some CSS setting which could break the grid appearance.

    You can find more troubleshooting techniques at Skins Troubleshooting.

    If you are unable to solve the issue, can you please provide a live URL to the problematic page or a simple runnable project which demonstrates it. I will examine it and provide a solution.

    Best Regards,
    Rumen
    Progress Telerik

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  3. Rainer
    Rainer avatar
    18 posts
    Member since:
    Nov 2017

    Posted 01 Nov in reply to Rumen Link to this post

    Hi,

    thank you for the reply.

    • I have test it with current Firefox, IE, Chrome ams MS Edge always the same
    • The Telerik version is 2018.3.910.
    • I did not remove or disable any CSS

    I have use the render mode tool and attached some screenshots.

    Best, Rainer

     

     

  4. Rumen
    Admin
    Rumen avatar
    14105 posts

    Posted 01 Nov Link to this post

    Thank you!

    Can you set the RenderMode property to Lightweight and test again?

    If this does not solve the problem, upgrade to 2019.3.1023.

    If the problem still persists, remove the page stylesheet for the test and see whether the issue is related to them.

    Regards,
    Rumen
    Progress Telerik

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  5. Rainer
    Rainer avatar
    18 posts
    Member since:
    Nov 2017

    Posted 04 Nov in reply to Rumen Link to this post

    Hello,

    with the Leightweight RenderMode ist the same problem.

    Whate do you mean with remove the page stylesheet?

    If I remove the Grid from the AjaxSettings/UpdateControls it looks a little better, see attachements.

    Best Rainer

  6. Rumen
    Admin
    Rumen avatar
    14105 posts

    Posted 04 Nov Link to this post

    Hi Rainer,

    Thank you for the new information!

    There are some new ideas I'd like to share with you:

     

    As to the question: Where do you mean with remove the page style sheet? - my idea was to remove all link and style tags from the master page and the content pages to be sure that the problem is not related to some classic with higher specificity which override the styles of RadGrid.

    If you can provide a live URL or a sample project I will be able to dive deeper into the problem from my side.

     

    Best Regards,
    Rumen
    Progress Telerik

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  7. Rainer
    Rainer avatar
    18 posts
    Member since:
    Nov 2017

    Posted 05 Nov in reply to Rumen Link to this post

    Hi Rumen,

    thanks for your ideas.

    • I got no JavaScript or server errors
    • I examine the style, take a look at the attachment
    • I turned off Ajax, see attachment
    • The RadGrid binding is OK.

    Kind regards, Rainer

  8. Rainer
    Rainer avatar
    18 posts
    Member since:
    Nov 2017

    Posted 05 Nov in reply to Rumen Link to this post

    ...supplement to your idea to turn off the css import in the mainframe. See attachment.

    Kind regards, Andreas

  9. Rumen
    Admin
    Rumen avatar
    14105 posts

    Posted 05 Nov Link to this post

    From the screenshot, it appears that the width of multipage component and its panel have width of 47-48 pixels as shown below:

    Do you have such a settings/configuration in the app? If yes, increase the width of the multipage and the panel.

    If not what you can do is to override the .multiPage and .corporatePageView CSS classes and apply wider width.

    Regards,
    Rumen
    Progress Telerik

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  10. Rainer
    Rainer avatar
    18 posts
    Member since:
    Nov 2017

    Posted 06 Nov in reply to Rumen Link to this post

    Hello,

    here is the markup from the form with 100% width in the RadMultipage and Rad PageView and a screenshot with the result.

    Regards, Rainer

    <%@ Page Language="vb" MasterPageFile="~/main.Master" CodeFile="allgemein_angebote.aspx.vb" Inherits="allgemein_angebote" %>
    <%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %>
     
    <%--17.10.17/Pahlke
    Aenderungen am Layout.--%>
     
     
    <asp:Content ID="contentHead" ContentPlaceHolderID="cphHead" runat="server">
     
        <style type="text/css">
        div.noWrapRadListBox .rlbText{
            white-space: nowrap;
        }
        .auto-style4 {
            width: 540px;
            }
        .auto-style5 {
            width: 116px;
        }
        .auto-style11 {
            width: 112px;
        }
        .auto-style12 {
            margin: 20px;
            height: 291px;
            width: 496px;
        }
            .auto-style13 {
                width: 116px;
                height: 28px;
            }
            .auto-style14 {
                height: 28px;
            }
        </style>
     
        <script type = "text/javascript">
        </script>
     
    </asp:Content>
     
    <asp:Content ID="contentStart" ContentPlaceHolderID="cphContent" runat="server">
     
        <telerik:RadAjaxManager ID="RadAjaxManager2" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadGrid1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadGrid1"
                                                    LoadingPanelID="RadAjaxLoadingPanel1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="btnAnzeigen">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadTabStrip1" />
                        <telerik:AjaxUpdatedControl ControlID="RadMultiPage1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
     
        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server"
                                     Skin="Default" Width="205px">
        </telerik:RadAjaxLoadingPanel>
     
        <div class="formTabs" style="background: none; padding: 0px;">
            <telerik:RadTabStrip runat="server" ID="RadTabStrip1"
                                 Style="float: left" SelectedIndex="0"
                                 MultiPageID="RadMultiPage1" Enabled="True">
                <Tabs>
                    <telerik:RadTab runat="server" Text="Angebote"> </telerik:RadTab>
                    <telerik:RadTab runat="server" Text="Historie"></telerik:RadTab>
                </Tabs>
            </telerik:RadTabStrip>
            <div style="clear: both;"></div>
        </div>
     
     
        <div class="formContainer formTrainer"
             style="clear: both; margin: 0; padding: 20px; background-color: #FFF; height: 430px">
     
            <telerik:RadMultiPage runat="server"
                                  ID="RadMultiPage1"
                                  SelectedIndex="0"
                                  CssClass="multiPage"
                                  Enabled="True"
                                  Width="100%">
     
                <telerik:RadPageView ID="RadPageViewAngebote"
                                     runat="server"
                                     CssClass="corporatePageView"
                                     Width="100%">
     
                    <telerik:RadGrid ID="RadGrid1" runat="server"
                                    AllowAutomaticDeletes="True"
                                    AllowFilteringByColumn="True"
                                    AllowSorting="True"
                                    AutoGenerateColumns="False"
                                    TableLayout="Fixed"
                                    meta:resourcekey="RadGrid1Resource1"
                                    Skin="WebBlue"
                                    AllowPaging="True"
                                    Width="702px"
                                    Culture="de-DE">
                        <ExportSettings>
                            <Pdf PageWidth="">
                            </Pdf>
                        </ExportSettings>
                        <MasterTableView AutoGenerateColumns="False"
                            CommandItemDisplay="Top" DataKeyNames="ID_Angebot"
                            EditMode="PopUp" HorizontalAlign="NotSet"
                            InsertItemPageIndexAction="ShowItemOnCurrentPage" NoMasterRecordsText="Keine Angebote vorhanden." Width="100%">
                            <CommandItemSettings AddNewRecordText="Angebot hinzufügen" RefreshText="Aktualisieren" />
                            <Columns>
                                <telerik:GridBoundColumn ColumnEditorID="GridTextBoxColumnEditor1" DataField="Name" HeaderText="Name" ItemStyle-VerticalAlign="Top" ItemStyle-Width="140px" SortExpression="Name" UniqueName="Name">
                                    <HeaderStyle Width="36%" />
                                    <ItemStyle VerticalAlign="Top" Width="140px" />
                                </telerik:GridBoundColumn>
                                <telerik:GridBoundColumn AllowFiltering="false" ColumnEditorID="GridTextBoxColumnEditor1" DataField="Stundensatz" DataFormatString="{0:###,##0.00}" HeaderText="Stundensatz" ItemStyle-VerticalAlign="Top" ItemStyle-Width="50px" SortExpression="Stundensatz" UniqueName="Stundensatz">
                                    <HeaderStyle Width="15%" />
                                    <ItemStyle VerticalAlign="Top" Width="50px" />
                                </telerik:GridBoundColumn>
                                <telerik:GridBoundColumn AllowFiltering="false" ColumnEditorID="GridTextBoxColumnEditor1" DataField="Fortbildungszuschlag" DataFormatString="{0:###,##0.00}" HeaderText="Fortbildungszuschlag" ItemStyle-VerticalAlign="Top" ItemStyle-Width="50px" SortExpression="Fortbildungszuschlag" UniqueName="Fortbildungszuschlag">
                                    <HeaderStyle Width="19%" />
                                    <ItemStyle VerticalAlign="Top" Width="50px" />
                                </telerik:GridBoundColumn>
                                <telerik:GridBoundColumn AllowFiltering="false" ColumnEditorID="GridTextBoxColumnEditor1" DataField="Fahrtkosten" DataFormatString="{0:###,##0.00}" HeaderText="Fahrtkosten" ItemStyle-VerticalAlign="Top" ItemStyle-Width="50px" SortExpression="Fahrtkosten" UniqueName="Fahrtkosten">
                                    <HeaderStyle Width="19%" />
                                    <ItemStyle VerticalAlign="Top" Width="50px" />
                                </telerik:GridBoundColumn>
                                <telerik:GridEditCommandColumn ButtonType="ImageButton" ItemStyle-VerticalAlign="Top" ItemStyle-Width="20px" UniqueName="EditCommandColumn">
                                    <HeaderStyle Width="5%" />
                                    <ItemStyle CssClass="MyImageButton" />
                                </telerik:GridEditCommandColumn>
                                <telerik:GridButtonColumn ButtonType="ImageButton" CommandName="Delete" ConfirmDialogType="RadWindow" ConfirmText="Angebot löschen?" ConfirmTitle="Löschen" ItemStyle-VerticalAlign="Top" ItemStyle-Width="20px" Text="Delete" UniqueName="DeleteColumn">
                                    <HeaderStyle Width="5%" />
                                    <ItemStyle CssClass="MyImageButton" HorizontalAlign="Center" />
                                </telerik:GridButtonColumn>
                            </Columns>
                            <EditFormSettings CaptionFormatString="Angebot bearbeiten" EditFormType="Template" InsertCaption="Angebot hinzufügen">
                                <EditColumn UniqueName="EditCommandColumn1">
                                </EditColumn>
                                <FormTemplate>
                                    <div class="auto-style12">
                                        <div style="padding-top:1px;" class="auto-style4">
                                            <table id="TableLinks" width="518px">
                                                <tr>
                                                    <td class="auto-style11">Name:</td>
                                                    <td class="auto-style11">
                                                        <asp:TextBox ID="txtName" runat="server" class="inputText" Width="200px"></asp:TextBox>
                                                    </td>
                                                    <td style="padding-left:6px" class="auto-style11">Ausdauer:</td>
                                                    <td align="right" class="auto-style11">
                                                        <asp:TextBox ID="txtAusdauer" runat="server" class="inputText" Width="30px"></asp:TextBox>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="auto-style11">Stundensatz:</td>
                                                    <td class="auto-style11">
                                                        <asp:TextBox ID="txtStundensatz" runat="server" class="inputText" Width="200px"></asp:TextBox>
                                                    </td>
                                                    <td style="padding-left:6px" class="auto-style11">Beweglichkeit:</td>
                                                    <td align="right" class="auto-style11">
                                                        <asp:TextBox ID="txtBeweglichkeit" runat="server" class="inputText" Width="30px"></asp:TextBox>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="auto-style11">Fortbildungszuschlag:</td>
                                                    <td class="auto-style11">
                                                        <asp:TextBox ID="txtFortbildungszuschlag" runat="server" class="inputText" Width="200px"></asp:TextBox>
                                                    </td>
                                                    <td style="padding-left:6px" class="auto-style11">Koordination:</td>
                                                    <td align="right" class="auto-style11">
                                                        <asp:TextBox ID="txtKoordination" runat="server" class="inputText" Width="30px"></asp:TextBox>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="auto-style11">Fahrtkosten:</td>
                                                    <td class="auto-style11">
                                                        <asp:TextBox ID="txtFahrtkosten" runat="server" class="inputText" Width="200px"></asp:TextBox>
                                                    </td>
                                                    <td style="padding-left:6px" class="auto-style11">Kraft:</td>
                                                    <td align="right" class="auto-style11">
                                                        <asp:TextBox ID="txtKraft" runat="server" class="inputText" Width="30px"></asp:TextBox>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="auto-style11">Kategorien :</td>
                                                    <td class="auto-style11">
                                                        Vorhanden
                                                    </td>
                                                    <td style="padding-left:6px" class="auto-style11">Zugeordnet </td>
                                                    <td align="right" class="auto-style11">
                                                         </td>
                                                </tr>
                                                <table>
                                                    <tr>
                                                        <td style="vertical-align:top; padding-top: 4px;" class="auto-style5"> </td>
                                                        <td style="padding-top: 3px">
                                                            <telerik:RadListBox ID="RadListBoxKategorien" runat="server" AllowTransfer="True" Height="100px" Width="210px" TransferToID="RadListBoxKAuswahl" AllowTransferOnDoubleClick="True">
                                                            </telerik:RadListBox>
                                                        </td>
                                                        <td style="padding-top: 3px">
                                                            <telerik:RadListBox ID="RadListBoxKAuswahl" runat="server" Height="100px" Width="174px" AllowTransferOnDoubleClick="True">
                                                            </telerik:RadListBox>
                                                        </td>
                                                    </tr>
                                                <tr>
                                                    <td class="auto-style5">Sparte:</td>
                                                    <td colspan="2">
                                                        <asp:DropDownList ID="selSparte" runat="server" CssClass="inputSelect" Width="206px">
                                                        </asp:DropDownList>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="auto-style13">Sichtbar:</td>
                                                    <td colspan="2" class="auto-style14">
                                                        <asp:CheckBox ID="ckbVisible" runat="server" />
                                                    </td>
                                                </tr>
     
                                                <tr>
                                                    <td class="auto-style5"></td>
                                                    <td align="right" colspan="2">
                                                        <asp:Button ID="Button1" runat="server" class="inputSubmit" CommandName='<%# IIf((TypeOf(Container) is GridEditFormInsertItem), "PerformInsert", "Update")%>' Text='<%# IIf((TypeOf(Container) is GridEditFormInsertItem), "Einfügen", "Speichern") %>' />
                                                          
                                                        <asp:Button ID="Button2" runat="server" CausesValidation="False" class="inputSubmit" CommandName="Cancel" Text="Abbrechen"  />
                                                    </td>
                                                </tr>
                                                </table>
                                            </table>
                                        </div>
                                    </div>
                                </FormTemplate>
                            </EditFormSettings>
                        </MasterTableView>
                        <GroupingSettings CaseSensitive="False" />
                        <FilterMenu CssClass="mnuFilter">
                        </FilterMenu>
                    </telerik:RadGrid>
                </telerik:RadPageView>
                <%--Tab Historie--%>
                <telerik:RadPageView runat="server" ID="RadPageViewHistorie"
                                     CssClass="corporatePageView" Width="16px" Height="16px">
                    <table style="width:100%;">
                        <tr>
                            <td align="right">
                                <asp:Button ID="btnAnzeigen"
                                    style="padding-left:10px;padding-right:10px;"
                                    runat="server"
                                    Text="Anzeigen"
                                    Width="100px"/>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div id="divHistorie" style="width:700px; height:363px; overflow-y: auto;" runat="Server"></div>
                            </td>
                        </tr>
                    </table>
                </telerik:RadPageView>
            </telerik:RadMultiPage>
        </div>
    </asp:Content>
  11. Rumen
    Admin
    Rumen avatar
    14105 posts

    Posted 06 Nov Link to this post

    Hi Rainer,

    Please set the Width of the MultiPage and the RadPageView in pixels and test again.

     

    Regards,
    Rumen
    Progress Telerik

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  12. Rainer
    Rainer avatar
    18 posts
    Member since:
    Nov 2017

    Posted 06 Nov in reply to Rumen Link to this post

    Hi,

    I tested with percent and px. The same result.

    Best, Rainer

  13. Answer
    Rumen
    Admin
    Rumen avatar
    14105 posts

    Posted 11 Nov Link to this post

    Hi Rainer,

    I managed to run the provided markup and grid configuration and to find the reason for the issue!

    It appeared to be caused by the invalid HTML placed in the FormTemplate which contained a <table> inside a <table> but not a <td> element.

    I fixed the template markup by placing the nested table in a <tr><td></td></tr> element and this fixed the rendering.

                                <FormTemplate>
                                    <div class="auto-style12">
                                        <div style="padding-top: 1px;" class="auto-style4">
                                            <table id="TableLinks" width="518px">
                                                <tr>
                                                    <td class="auto-style11">Name:</td>
                                                    <td class="auto-style11">
                                                        <asp:TextBox ID="txtName" runat="server" class="inputText" Width="200px"></asp:TextBox>
                                                    </td>
                                                    <td style="padding-left: 6px" class="auto-style11">Ausdauer:</td>
                                                    <td align="right" class="auto-style11">
                                                        <asp:TextBox ID="txtAusdauer" runat="server" class="inputText" Width="30px"></asp:TextBox>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="auto-style11">Stundensatz:</td>
                                                    <td class="auto-style11">
                                                        <asp:TextBox ID="txtStundensatz" runat="server" class="inputText" Width="200px"></asp:TextBox>
                                                    </td>
                                                    <td style="padding-left: 6px" class="auto-style11">Beweglichkeit:</td>
                                                    <td align="right" class="auto-style11">
                                                        <asp:TextBox ID="txtBeweglichkeit" runat="server" class="inputText" Width="30px"></asp:TextBox>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="auto-style11">Fortbildungszuschlag:</td>
                                                    <td class="auto-style11">
                                                        <asp:TextBox ID="txtFortbildungszuschlag" runat="server" class="inputText" Width="200px"></asp:TextBox>
                                                    </td>
                                                    <td style="padding-left: 6px" class="auto-style11">Koordination:</td>
                                                    <td align="right" class="auto-style11">
                                                        <asp:TextBox ID="txtKoordination" runat="server" class="inputText" Width="30px"></asp:TextBox>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="auto-style11">Fahrtkosten:</td>
                                                    <td class="auto-style11">
                                                        <asp:TextBox ID="txtFahrtkosten" runat="server" class="inputText" Width="200px"></asp:TextBox>
                                                    </td>
                                                    <td style="padding-left: 6px" class="auto-style11">Kraft:</td>
                                                    <td align="right" class="auto-style11">
                                                        <asp:TextBox ID="txtKraft" runat="server" class="inputText" Width="30px"></asp:TextBox>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="auto-style11">Kategorien :</td>
                                                    <td class="auto-style11">Vorhanden
                                                    </td>
                                                    <td style="padding-left: 6px" class="auto-style11">Zugeordnet </td>
                                                    <td align="right" class="auto-style11"></td>
                                                </tr>
                                                <tr>
                                                    <td>
                                                        <table>
                                                    <tr>
                                                        <td style="vertical-align: top; padding-top: 4px;" class="auto-style5"></td>
                                                        <td style="padding-top: 3px">
                                                            <telerik:RadListBox ID="RadListBoxKategorien" runat="server" AllowTransfer="True" Height="100px" Width="210px" TransferToID="RadListBoxKAuswahl" AllowTransferOnDoubleClick="True">
                                                            </telerik:RadListBox>
                                                        </td>
                                                        <td style="padding-top: 3px">
                                                            <telerik:RadListBox ID="RadListBoxKAuswahl" runat="server" Height="100px" Width="174px" AllowTransferOnDoubleClick="True">
                                                            </telerik:RadListBox>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td class="auto-style5">Sparte:</td>
                                                        <td colspan="2">
                                                            <asp:DropDownList ID="selSparte" runat="server" CssClass="inputSelect" Width="206px">
                                                            </asp:DropDownList>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td class="auto-style13">Sichtbar:</td>
                                                        <td colspan="2" class="auto-style14">
                                                            <asp:CheckBox ID="ckbVisible" runat="server" />
                                                        </td>
                                                    </tr>
    
                                                    <tr>
                                                        <td class="auto-style5"></td>
                                                        <td align="right" colspan="2">
                                                            <%--<asp:Button ID="Button1" runat="server" class="inputSubmit" CommandName='<%# IIf((TypeOf(Container) is GridEditFormInsertItem), "PerformInsert", "Update")%>' Text='<%# IIf((TypeOf(Container) is GridEditFormInsertItem), "Einfügen", "Speichern") %>' />--%>
    
                                                            <asp:Button ID="Button2" runat="server" CausesValidation="False" class="inputSubmit" CommandName="Cancel" Text="Abbrechen" />
                                                        </td>
                                                    </tr>
                                                </table>
                                                    </td>
                                                </tr>
                                                
                                            </table>
                                        </div>
                                    </div>
                                </FormTemplate>
    

    For your convenience I have attached my test pages.

     

    Regards,
    Rumen
    Progress Telerik

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  14. Rainer
    Rainer avatar
    18 posts
    Member since:
    Nov 2017

    Posted 12 Nov in reply to Rumen Link to this post

    Wow,

    thanks a lot Rumen, It works!

    Kind regards, Rainer

  15. Rumen
    Admin
    Rumen avatar
    14105 posts

    Posted 12 Nov Link to this post

    You are welcome, Rainer! Glad to be of help.

     

    Regards,
    Rumen
    Progress Telerik

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top