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

Entry overflow in edit mode

14 Answers 116 Views

Grid

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

Rainer asked on 28 Oct 2019, 08:44 AM

grid01.jpg

grid02.jpg

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

14 Answers, 1 is accepted

answered on 31 Oct 2019, 07:48 AM

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.

answered on 01 Nov 2019, 08:43 AM

new02.jpg

new01.jpg

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

answered on 04 Nov 2019, 07:32 AM

update01.jpg

update02.jpg

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

answered on 04 Nov 2019, 04:38 PM

Hi Rainer,

Thank you for the new information!

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

Do you get any JavaScript or server errors when the issue happens?
Examine what is happening with the styles of RadGrid before and when the issue happens: Improve Your Debugging Skills with Chrome DevTools.
Turn off the AJAX updates entirely - Make a test by turning AJAX off entirely: Get more descriptive errors by disabling AJAX. You will need to ensure that RadAjaxManager is off and there are no UpdatePanel or RadAjaxPanels on the master/content page or usercontrols. If turning AJAX will make the Grid work, then the issue is most likely caused by the Nested AJAX controls. Check out this forum post: https://www.telerik.com/forums/paging-not-work-after-the-first-click#V6RCv9jg6EqvK3rdcrWJeA.
Make sure that RadGrid is bind properly: How to bind RadGrid properly on server-side.

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.

answered on 05 Nov 2019, 12:32 PM

radajaxpanel.jpg

noajax.jpg

withajax.jpg

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

answered on 06 Nov 2019, 09:00 AM

multipagewidth100.jpg

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>

</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>

Accepted

answered on 11 Nov 2019, 01:34 PM

TelerikWebSite3.zip

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.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting

Testing & Mocking

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Entry overflow in edit mode

14 Answers, 1 is accepted