[Rad Button] Strange Behaviour

[Joakim]

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.

[Joana]

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