RadButton ToggleType=Radio

11 posts, 1 answers
  1. Erik
    Erik avatar
    314 posts
    Member since:
    Feb 2008

    Posted 10 Apr 2013 Link to this post

    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
  2. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1494 posts

    Posted 11 Apr 2013 Link to this post

    Hello Erik,

    Note that when you load a user control dynamically it is a good practice to instantiate it in Page_Init or Page_Load and then always recreate the last loaded User Control. You can find an example on how to do that in Load User Controls help article as well as in Ajax - Loading User Controls online demo.

    Greetings,
    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Erik
    Erik avatar
    314 posts
    Member since:
    Feb 2008

    Posted 11 Apr 2013 Link to this post

    Hello Danail,

    I do not have any problems with loading usercontrols dynamically.

    My question is "Why is the button not selected (checked) on postback?"
  5. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1494 posts

    Posted 12 Apr 2013 Link to this post

    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.
  6. Erik
    Erik avatar
    314 posts
    Member since:
    Feb 2008

    Posted 12 Apr 2013 Link to this post

    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">
    <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: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" />
        </telerik:RadAjaxPanel>
        </form>
    </body>
    </html>


    Can you confirm now?

    Regards Erik
  7. moegal
    moegal avatar
    273 posts
    Member since:
    Jul 2007

    Posted 12 Apr 2013 Link to this post

    i am having a similar issue.  I am dynamically creating the radio buttons and after a partial postbock the checked value for all radio buttons is false although one is check.

    Marty
  8. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1494 posts

    Posted 15 Apr 2013 Link to this post

    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
    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.
  9. moegal
    moegal avatar
    273 posts
    Member since:
    Jul 2007

    Posted 15 Apr 2013 Link to this post

    my example is very complicated and too long to show here.  When I get some free time I will make a shorter example.  For now I created a global variable in the class that holds the checked value.  Very ugly hack, but for now it works.

    Marty
  10. Erik
    Erik avatar
    314 posts
    Member since:
    Feb 2008

    Posted 17 Apr 2013 Link to this post

    Hello Danail and Marty,

    I've submitted a support ticked with a simple project demonstrating the issue.


    Erik
  11. moegal
    moegal avatar
    273 posts
    Member since:
    Jul 2007

    Posted 17 Apr 2013 Link to this post

    Great. Thanks!
  12. Answer
    Danail Vasilev
    Admin
    Danail Vasilev avatar
    1494 posts

    Posted 17 Apr 2013 Link to this post

    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
    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017