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

RadioButton toggle programatically client-side

4 Answers 644 Views
Button
This is a migrated thread and some comments may be shown as answers.
JP
Top achievements
Rank 1
JP asked on 30 Oct 2012, 04:30 PM
Hi,

I want to toggle a RadioButton client-side. If I use .set_checked(true), the previously checked RadioButton (same group) is still checked. If I use .click(), nothing happens (it returns false). How can I toggle a RadioButton programatically client-side so that the previously toggled buttons gets unchecked?

Thanks!

4 Answers, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 2
answered on 31 Oct 2012, 05:50 AM
Hi,

One suggestion is that you can check the state of RadButton and set the values accordingly as follows.

ASPX:
<script type="text/javascript">
 function OnClientClicked(sender, args)
 {
  var btn = $find("<%=btnToggle1.ClientID %>");
  if (btn.get_checked())
  {
   btn.set_checked(false);
  }
  else
  {
   btn.set_checked(true);
  }
 }
</script>

Thanks,
Princy.
0
JP
Top achievements
Rank 1
answered on 31 Oct 2012, 08:25 AM
Hi Princy,

that will indeed toggle the respective button, but the button which is currently checked will remain checked (which is simply wrong when using radio buttons).

My current approach is to uncheck all radio buttons and then to check the button which needs to be checked. But I think there must be a much better approach.
0
Princy
Top achievements
Rank 2
answered on 01 Nov 2012, 05:15 AM
Hi,

One suggestion is that you can set Groupname for Radbutton for user inputs and set the values as follows while setting state from javascript as follows.

ASPX:
<telerik:RadButton ID="btnToggle1" runat="server" GroupName="Toggle" ToggleType="Radio" ButtonType="ToggleButton"></telerik:RadButton
<telerik:RadButton ID="btnToggle2" runat="server" GroupName="Toggle" ToggleType="Radio" ButtonType="ToggleButton"></telerik:RadButton>
<telerik:RadButton ID="btnToggle3" runat="server" GroupName="Toggle" ToggleType="Radio" ButtonType="ToggleButton"></telerik:RadButton>

JS:
<script type="text/javascript">
    function OnClientClicked(sender, args)
    {
        var btn1 = $find("<%=btnToggle1.ClientID %>");
        var btn2 = $find("<%=btnToggle2.ClientID %>");
        var btn3 = $find("<%=btnToggle3.ClientID %>");
        if (btn1.get_checked())
        {
            btn1.set_checked(false);
        }
        else
        {
            btn1.set_checked(true);
            btn2.set_checked(false);
            btn3.set_checked(false);
        }
    }
</script>

Hope this helps.

Thanks,
Princy.
0
Slav
Telerik team
answered on 02 Nov 2012, 02:24 PM
Hello Jan-Patrick,

Indeed, currently the set_checked method does not uncheck other radio RadButtons with the same GroupName. This problem is reported to our developers, although I cannot provide a firm estimate when it will be fixed. You can track the status of the issue via the PITS Item I have logged.

For the time being I would suggest manually clearing the radio buttons when you use set_checked, which you have already done.

I have added Telerik points to your account as a token of gratitude for bringing this to our attention.

Kind regards,
Slav
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.
Tags
Button
Asked by
JP
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 2
JP
Top achievements
Rank 1
Slav
Telerik team
Share this question
or