Problems after 2017 Upgrade

4 posts, 0 answers
  1. RAJAT
    RAJAT avatar
    11 posts
    Member since:
    Aug 2017

    Posted 15 Sep 2017 Link to this post

    Hi,

    I recently upgraded my application from the 2016 controls to the 2017 R2 controls and now I'm having issues with the Combobox and how it displays on the screen.

    My combobox is within an Editform / form template of a RadGrid.  It is defined this way:

    <code>

    <telerik:RadComboBox ID="rddRouteInner" runat="server" DataTextField="route" DataValueField="route"
    DropDownHeight="200px" DropDownWidth="350px" AllowCustomText="true" Font-Size="12px" >
    </telerik:RadComboBox>

    </code

    Very simple - no CSS applied or anything else.  I added the Font-Size="12 px" because the font in the input was different from the drop down since the upgrade - which seems kind of crazy - but not a big deal.

    Attached is what the output looks like.  The Input Box is taller than the surrounding drop down box - and I get multiple drop down boxes (at least started).  I have no idea how to troubleshoot this - when I just put a combobox on a page by itself - it works correctly.

    Help?

     

    Thanks!!!

  2. Rumen
    Admin
    Rumen avatar
    14324 posts

    Posted 20 Sep 2017 Link to this post

    Hello,

    Can you please ensure that there aren't mixed Render modes on the page?

    All Telerik controls should have RenderMode set to Lightweight as explained in this help article Incorrect or Distorted Appearance:

    There are mixed Render Modes of the controls on the page. For example, a RadButton on the master page has RenderMode="Classic" and a RadButton on a user control has RenderMode="Lightweight". All controls of the same type and their child controls must have the same render mode.

    Best regards,
    Rumen
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. RAJAT
    RAJAT avatar
    11 posts
    Member since:
    Aug 2017

    Posted 21 Sep 2017 Link to this post

    Hello!

    Can you please ensure that there aren't mixed Render modes on the page?
     All Telerik controls should have RenderMode set to Lightweight as explained in this help article

    You were absolutely right the mixed rendermode values fixed the issue - setting everything to lightweight fixed the problems with the combobox.  Unfortunately it lead to a completely different issue - as attached.

    In the screen shots below are the "correct" display of a radnumerictextbox (prior to the upgrade / change to lightweight TelerikNewIssueHeightCorrect.png) and the new display of it - where the size is too small to fit the number properly (TelerikNewIssueHeight2.png).  Adjusting the height property for the controls (TelerikNewIssueHeight.png) doesn't solve it as it changes the size of the encompassing div rather than the text box within the div.  Below is the code:

    <p>/* Code with the height adjustment (TelerikNewIssueHeight2.png) */</p><p><tr><br>                                <td class="TDTitleBase">Number Of Pieces:</td><br>                                <td><br>                                    <telerik:RadNumericTextBox ID="rntNumberofPieces" runat="server" Visible="true" ValidationGroup="BasicInfo" CausesValidation="true" RenderMode="Lightweight" Height="30px"><br>                                        <NumberFormat DecimalDigits="0" /><br>                                    </telerik:RadNumericTextBox><br>                                    <asp:RequiredFieldValidator ID="rntNumberofPiecesValidator" runat="server" ControlToValidate="rntNumberofPieces" EnableClientScript="true" ValidationGroup="BasicInfo"  RenderMode="Lightweight"<br>                                        ErrorMessage="required field" CssClass="validator" ForeColor="Red"></asp:RequiredFieldValidator><br>                                </td><br>                            </tr><br>                            <tr><br>                                <td class="TDTitleBase">Base Instructions:</td><br>                                <td><br>                                    <telerik:RadDropDownList ID="rddInstruct" runat="server" Width="300px" DataValueField="instruct_code" DataTextField="description" RenderMode="Lightweight"><br>                                    </telerik:RadDropDownList><br>                                </td><br>                            </tr><br>                            <tr><br>                                <td class="TDTitleBase">Additional Instructions:</td><br>                                <td><br>                                    <telerik:RadTextBox ID="rtbAdditionalInstruct" runat="server" Visible="true" Width="550px" TextMode="MultiLine" MaxLength="500" RenderMode="Lightweight" Height="50px"></telerik:RadTextBox><br>                                </td><br>                            </tr><br></p><p>/* Code without the height adjustment */<br><tr><br>                                <td class="TDTitleBase">Number Of Pieces:</td><br>                                <td><br>                                    <telerik:RadNumericTextBox ID="rntNumberofPieces" runat="server" Visible="true" ValidationGroup="BasicInfo" CausesValidation="true" RenderMode="Lightweight"><br>                                        <NumberFormat DecimalDigits="0" /><br>                                    </telerik:RadNumericTextBox><br>                                    <asp:RequiredFieldValidator ID="rntNumberofPiecesValidator" runat="server" ControlToValidate="rntNumberofPieces" EnableClientScript="true" ValidationGroup="BasicInfo"  RenderMode="Lightweight"<br>                                        ErrorMessage="required field" CssClass="validator" ForeColor="Red"></asp:RequiredFieldValidator><br>                                </td><br>                            </tr><br>                            <tr><br>                                <td class="TDTitleBase">Base Instructions:</td><br>                                <td><br>                                    <telerik:RadDropDownList ID="rddInstruct" runat="server" Width="300px" DataValueField="instruct_code" DataTextField="description" RenderMode="Lightweight"><br>                                    </telerik:RadDropDownList><br>                                </td><br>                            </tr><br>                            <tr><br>                                <td class="TDTitleBase">Additional Instructions:</td><br>                                <td><br>                                    <telerik:RadTextBox ID="rtbAdditionalInstruct" runat="server" Visible="true" Width="550px" TextMode="MultiLine" MaxLength="500" RenderMode="Lightweight"></telerik:RadTextBox><br>                                </td><br>                            </tr></p>

    So how do I fix this so the lightweight controls look like the original versions?

     

    Thanks!

  4. Rumen
    Admin
    Rumen avatar
    14324 posts

    Posted 22 Sep 2017 Link to this post

    Hello Rajat,

    If you'd like to increase the text and body size of RadCombobox, all you need to do is to increase its font-size via the following class:

        <style>
            .RadComboBox { font-size: 40px !important; }
        </style>

     

    Regards,
    Rumen
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top