RadioButton toggle programatically client-side

5 posts, 0 answers
  1. JP
    JP avatar
    120 posts
    Member since:
    Aug 2011

    Posted 30 Oct 2012 Link to this post

    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!
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 31 Oct 2012 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. JP
    JP avatar
    120 posts
    Member since:
    Aug 2011

    Posted 31 Oct 2012 Link to this post

    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.
  5. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 01 Nov 2012 Link to this post

    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.
  6. Slav
    Admin
    Slav avatar
    1356 posts

    Posted 02 Nov 2012 Link to this post

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