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

RadButton ToggleType=Radio

10 Answers 256 Views

Button

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

Erik asked on 10 Apr 2013, 01:14 PM

radButton.png

Hi all,

I have a scenario with the radButton radio buttons. When I press one, the postback is done (=ok) but after the postback the buttons are all unchecked.

<telerik:RadButton ID="rbt_Toggle_OrgPers_Orga" Value="1" ToggleType="Radio" ButtonType="StandardButton" GroupName="Toggle_OrgPers" ToolTip="Organisation" Width="56px" Height="56px" Icon-PrimaryIconUrl="~/Style/img/office_building_48.png" UseSubmitBehavior="false" AutoPostBack="true" Icon-PrimaryIconWidth="44" Icon-PrimaryIconHeight="48" Icon-PrimaryIconTop="3" runat="server" />

<telerik:RadButton ID="rbt_Toggle_OrgPers_Male" Value="2" ToggleType="Radio" ButtonType="StandardButton" GroupName="Toggle_OrgPers" ToolTip="Male" Width="56px" Height="56px" Icon-PrimaryIconUrl="~/Style/img/male_48.png" UseSubmitBehavior="false" AutoPostBack="true" Icon-PrimaryIconWidth="44" Icon-PrimaryIconHeight="48" Icon-PrimaryIconTop="3" runat="server" />

<telerik:RadButton ID="rbt_Toggle_OrgPers_FMle" Value="3" ToggleType="Radio" ButtonType="StandardButton" GroupName="Toggle_OrgPers" ToolTip="Female" Width="56px" Height="56px" Icon-PrimaryIconUrl="~/Style/img/Female_48.png" UseSubmitBehavior="false" AutoPostBack="true" Icon-PrimaryIconWidth="44" Icon-PrimaryIconHeight="48" Icon-PrimaryIconTop="3" runat="server" />

This scenario is within a usercontrol that is within a ajax updatepanel.

Why is the button not selected (checked) on postback?

Erik

10 Answers, 1 is accepted

answered on 12 Apr 2013, 10:12 AM

RadButton-ToggleTypeRadio.zip

Hi Erik,

The reason for providing you with information about how to load usercontrols dynamically is that this is often met scenario which some times leads to misunderstanding.

Apart from that I have tried to reproduce your issue with an ajaxified user control that consists the provided code but to no avail. You can watch a short video with the test here and then tell me what I am missing.

It might be possible that the ViewState is disabled and therefore the toggle buttons loose their state. If that is not the case, then you can try to reproduce the issue with the attached VS sample and then tell us what changes you have made, so that we can proceed with the investigation further. Could you also confirm the version of RadControls as well as the browsers under which you are having the unexpected behavior?

Kind regards,
Danail Vasilev
the Telerik team

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.

answered on 12 Apr 2013, 10:56 AM

Hi Danail,

I created a test project for you to demonstrate the scenario. When clicking a button it doesn't stay pressed after postback. The Checked property however in server side code behind is correct.

Just start a standard web project and RadControl it. then in the default.aspx:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

</head>

<body>

<form id="form1" runat="server">

<telerik:RadScriptManager ID="RadScriptManager1" runat="server" />

<telerik:RadAjaxPanel ID="RadAjaxPanel_App" runat="server" LoadingPanelID="RadAjaxLoadingPanel_App" Style="width: 100%; height: 100%;" class="FullScreen">

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel_App" runat="server" />

<telerik:RadFormDecorator ID="RadFormDecorator_App" runat="server" />

</telerik:RadAjaxPanel>

</form>

</body>

</html>

Can you confirm now?

Regards Erik

answered on 15 Apr 2013, 09:58 AM

Hello All,

I have tried to reproduce your issue with the exact code that Erik has provided but to no avail. You can watch the test I made here, and then tell what I am missing. The only changes I have made were to add existing images to the buttons and include additional button that performs a postback.

Note also the following:

The RadAjaxLoadingPanel is not supposed to be inside the ajaxified part of the page, so that it should be put outside of the RadAjaxPanel's boundaries. You can find useful this online demo and this online documentation related on using RadAjaxLoadingPanel.
The partial postback goes through the same page lifecycle as a normal postback, so that if there is some codebehind it will be executed. It might be possible that you are setting the checked property of some of the toggle buttons sharing the same group in the code behind, so that on each partial page update it will be set. Therefore I can suggest you to recheck your codebehind for the existance of such a scenario. You can also find useful Different ways to make a request to the server in ASP.NET blog post, section partial postback.

Regards,
Danail Vasilev
the Telerik team

Accepted

answered on 17 Apr 2013, 02:16 PM

Hello All,

It seems that there is an appearance issue with the RadButton for Silk and Glow skins when:

The ToggleType property of the RadButton is set to CheckBox or Radio
AND the height property of the RadButton is set.

Note that this is just an appearance issue and it does not break the proper functionality of the RadButton. You can verify that by using the get_checked() method, which returns a boolean value about the current state of the button.

Our developers have been informed about that issue and they will fix for in the next internal build as well as for the next Q2 2013.

For the time being you can either change the ButtonType from StandardButton to SkinnedButton, or use the following workaround:

<style type="text/css">

/*Workaround for Silk skin*/

html .RadButton_Silk.RadButton.rbVerticalButtonChecked,

html .RadButton_Silk.RadButton.rbVerticalButtonChecked:hover

{

background-color: #CCCCCC;

background-image: -moz-linear-gradient(center top , #C7C7C7 0px, #DEDEDE 100%);

border-color: darkgrey;

box-shadow: 0 0 4px #C0C0C0 inset;

color: black;

}

/*Workaround for Glow skin*/

html .RadButton_Glow.RadButton.rbVerticalButtonChecked,

html .RadButton_Glow.RadButton.rbVerticalButtonChecked:hover

{

background-color: #485258;

background-image: -moz-linear-gradient(center top , #485258 0px, #485258 100%);

border: 0 none;

box-shadow: 0 0 4px #1C262C inset;

color: white;

}

</style>

Greetings,
Danail Vasilev
the Telerik team