[Rad Button] Strange Behaviour

2 posts, 0 answers
  1. Joakim
    Joakim avatar
    5 posts
    Member since:
    Apr 2016

    Posted 09 May Link to this post

    Hi,

     

    I'm quite new to the Telerik framework, but I've found some strange behaviour(s) when using buttons.

     

    I've got a RadGrid with an edittemplate that expands when a user clicks the editcolumn of a row he wishes to edit.

    In this edittemplate I have a few textfields, dropdowns and buttons (checkboxes).

    Strangely enough the buttons are acting somewhat strange; my project manager wants me to use the classic rendertype - but when using the classic rendering I seem to have a checkbox in the checkbox (meaning that I have another box inside the box that is left of the text of said checkbox). 

    If I however go for a lightweight rendering it seems fine, until I check the box once which then expands the width of the checkbox. 

     

    Here are some snippets of the code:

     

    <div style="margin-top:10px;">
                                       <telerik:RadButton ID="RbtnShow" RenderMode="Auto" runat="server" ToggleType="CheckBox" ButtonType="StandardButton" style="margin-right:203px;">
                                           <ToggleStates>
                                               <telerik:RadButtonToggleState Text="Show On Report" PrimaryIconCssClass="rbToggleCheckboxChecked" />
                                               <telerik:RadButtonToggleState Text="Show On Report" PrimaryIconCssClass="rbToggleCheckbox" />
                                           </ToggleStates>
                                       </telerik:RadButton>

                                       </telerik:RadButton>
                                              <telerik:RadLabel runat="server" ID="RlblDate" AssociatedControlID="RtxtDate" Text="State Date:" style="margin-right:38px;" />
                                                <telerik:RadTextBox ID="RtxtDate" runat="server" width="130px">
                                                </telerik:RadTextBox>
                                           </div>

     

                                     <telerik:RadButton ID="RbtnKey" runat="server" ToggleType="CheckBox" ButtonType="StandardButton" width="110px"  

                                                                    style="margin-right:200px;">
                                           <ToggleStates>
                                               <telerik:RadButtonToggleState Text="Key Issue" PrimaryIconCssClass="rbToggleCheckboxChecked" />
                                               <telerik:RadButtonToggleState Text="Key Issue" PrimaryIconCssClass="rbToggleCheckbox" />
                                           </ToggleStates>
                                       </telerik:RadButton>

     

     

    I'll attach a picture so you might understand it better.

  2. Joana
    Admin
    Joana avatar
    70 posts

    Posted 12 May Link to this post

    Hello Joakim,

    The issue is encountered due to the combining of both Classic and Lightweight RenderMode on the same page. The RenderModes styles get overriden and you should not use them together. So, your code should look like follows:

    <telerik:RadScriptManager runat="server"></telerik:RadScriptManager>
           <div style="margin-top: 10px;">
               <telerik:RadButton ID="RbtnShow" RenderMode="Auto" runat="server" ToggleType="CheckBox" ButtonType="StandardButton" Style="margin-right: 203px;">
                   <ToggleStates>
                       <telerik:RadButtonToggleState Text="Show On Report" PrimaryIconCssClass="rbToggleCheckboxChecked" />
                       <telerik:RadButtonToggleState Text="Show On Report" PrimaryIconCssClass="rbToggleCheckbox" />
                   </ToggleStates>
               </telerik:RadButton>
     
               <telerik:RadLabel runat="server" ID="RlblDate" RenderMode="Auto" AssociatedControlID="RtxtDate" Text="State Date:" Style="margin-right: 38px;" />
               <telerik:RadTextBox ID="RtxtDate" runat="server" Width="130px" RenderMode="Auto">
               </telerik:RadTextBox>
           </div>
     
           <telerik:RadButton ID="RbtnKey" runat="server" ToggleType="CheckBox" ButtonType="StandardButton" Width="110px"
               Style="margin-right: 200px;" RenderMode="Auto">
               <ToggleStates>
                   <telerik:RadButtonToggleState Text="Key Issue" PrimaryIconCssClass="rbToggleCheckboxChecked" />
                   <telerik:RadButtonToggleState Text="Key Issue" PrimaryIconCssClass="rbToggleCheckbox" />
               </ToggleStates>
           </telerik:RadButton>

    You have to choose which RenderMode to use and you could add it globally in your web.config to avoid repeating RenderMode="Auto" for each component.

    Regards,
    Joana
    Telerik
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top