Validating Rad Radio Buttons

5 posts, 0 answers
  1. Jerk
    Jerk avatar
    7 posts
    Member since:
    May 2012

    Posted 19 May 2012 Link to this post

    I have three rad radio button in a group, i need to be able to validate that one of the group has been selected before i allow the user to move on. Trying to use the requiredfieldvalidator or comparevalidator, but they throw an error saying that the rad button isn't valid control to validate. Does anyone have a work around for this?
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 22 May 2012 Link to this post

    Hi Jerk,

    Here is the sample code which I tried based on your scenario.

    ASPX:
    <telerik:RadButton OnClientClicking="OnClientClicking1" ID="RadButton1" Checked="true" AutoPostBack="false" runat="server" Text="one" ButtonType="ToggleButton" ToggleType="Radio" ></telerik:RadButton>
    <telerik:RadButton OnClientClicking="OnClientClicking2" ID="RadButton2" runat="server" AutoPostBack="false" Text="one" ButtonType="ToggleButton" ToggleType="Radio" ></telerik:RadButton>
    <telerik:RadButton OnClientClicking="OnClientClicking3" ID="RadButton3" runat="server" AutoPostBack="false" Text="one" ButtonType="ToggleButton" ToggleType="Radio" ></telerik:RadButton>

    JS:
    <script type="text/javascript">
        function OnClientClicking1(sender, args)
         {
            var button2 = $find("<%=RadButton2.ClientID %>");
            var button3 = $find("<%=RadButton3.ClientID %>");
            if (button2.get_checked())
            {
                button2.set_checked(false);
            }
            if (button3.get_checked())
            {
                button3.set_checked(false);
            }
         }
        function OnClientClicking2(sender, args)
         {
            var button1 = $find("<%=RadButton1.ClientID %>");
            var button3 = $find("<%=RadButton3.ClientID %>");
            if (button1.get_checked())
            {
                button1.set_checked(false);
            }
            if (button3.get_checked())
            {
                button3.set_checked(false);
            }
         }
        function OnClientClicking3(sender, args)
         {
            var button1 = $find("<%=RadButton1.ClientID %>");
            var button2 = $find("<%=RadButton2.ClientID %>");
            if (button1.get_checked())
           {
                button1.set_checked(false);
            }
            if (button2.get_checked())
           {
                button2.set_checked(false);
            }
         }
    </script>

    Hope this helps.

    Thanks,
    Princy.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Jerk
    Jerk avatar
    7 posts
    Member since:
    May 2012

    Posted 22 May 2012 Link to this post

    Princy,
    Thanks for the reply, let me further explain. Take the code i posted below, suppose you have a wizard with radbuttons in each step, how would i validate that the current steps buttons have all been accounted for, before allowing the user to the next step? Also i need to start all of the button groups off without a response, i can't have one default to checked. Hopefully this explains what i'm trying to do better.

    <asp:Wizard ID="Wizard1" runat="server" DisplaySideBar="False">
        <WizardSteps>
            <asp:WizardStep ID="WizardStep1" runat="server" Title="Step 1" StepType="Start">
            Page 1 <br />
             <telerik:RadButton ID="Q1_1" runat="server" Text="Yes" ToggleType="Radio" ButtonType="StandardButton" GroupName="Q1" AutoPostBack="false" Width="100px" CausesValidation="false">
                  <ToggleStates>
                        <telerik:RadButtonToggleState Text="Yes" PrimaryIconCssClass="rbToggleRadioChecked" />
                        <telerik:RadButtonToggleState Text="Yes" PrimaryIconCssClass="rbToggleRadio" />
                  </ToggleStates>
              </telerik:RadButton>
              <telerik:RadButton ID="Q1_2" runat="server" Text="No" ToggleType="Radio"  ButtonType="StandardButton" GroupName="Q1" Width="100px" AutoPostBack="false" CausesValidation="false">
                  <ToggleStates>
                        <telerik:RadButtonToggleState Text="No" PrimaryIconCssClass="rbToggleRadioChecked" />
                        <telerik:RadButtonToggleState Text="No" PrimaryIconCssClass="rbToggleRadio" />
                  </ToggleStates>
              </telerik:RadButton>
              <telerik:RadButton ID="Q1_3" runat="server" Text="Maybe"  ToggleType="Radio" ButtonType="StandardButton" GroupName="Q1" AutoPostBack="false" Width="100px" CausesValidation="false">
                  <ToggleStates>
                        <telerik:RadButtonToggleState Text="Maybe" PrimaryIconCssClass="rbToggleRadioChecked" />
                        <telerik:RadButtonToggleState Text="Maybe" PrimaryIconCssClass="rbToggleRadio" />
                  </ToggleStates>
              </telerik:RadButton>
            </asp:WizardStep>
            <asp:WizardStep ID="WizardStep2" runat="server" Title="Step 2" StepType="Step">
            Page 2 <br />
             <telerik:RadButton ID="Q2_1" runat="server" Text="Yes" ToggleType="Radio" ButtonType="StandardButton" GroupName="Q2" AutoPostBack="false" Width="100px" CausesValidation="false">
                  <ToggleStates>
                        <telerik:RadButtonToggleState Text="Yes" PrimaryIconCssClass="rbToggleRadioChecked" />
                        <telerik:RadButtonToggleState Text="Yes" PrimaryIconCssClass="rbToggleRadio" />
                  </ToggleStates>
              </telerik:RadButton>
              <telerik:RadButton ID="Q2_2" runat="server" Text="No" ToggleType="Radio"  ButtonType="StandardButton" GroupName="Q2" Width="100px" AutoPostBack="false" CausesValidation="false">
                  <ToggleStates>
                        <telerik:RadButtonToggleState Text="No" PrimaryIconCssClass="rbToggleRadioChecked" />
                        <telerik:RadButtonToggleState Text="No" PrimaryIconCssClass="rbToggleRadio" />
                  </ToggleStates>
              </telerik:RadButton>
              <telerik:RadButton ID="Q2_3" runat="server" Text="Maybe"  ToggleType="Radio" ButtonType="StandardButton" GroupName="Q2" AutoPostBack="false" Width="100px" CausesValidation="false">
                  <ToggleStates>
                        <telerik:RadButtonToggleState Text="Maybe" PrimaryIconCssClass="rbToggleRadioChecked" />
                        <telerik:RadButtonToggleState Text="Maybe" PrimaryIconCssClass="rbToggleRadio" />
                  </ToggleStates>
              </telerik:RadButton>
            </asp:WizardStep>
             <asp:WizardStep ID="WizardStep3" runat="server" Title="Step 2" StepType="Finish">
             Page 3 <br />
             <telerik:RadButton ID="Q3_1" runat="server" Text="Yes" ToggleType="Radio" ButtonType="StandardButton" GroupName="Q3" AutoPostBack="false" Width="100px" CausesValidation="false">
                  <ToggleStates>
                        <telerik:RadButtonToggleState Text="Yes" PrimaryIconCssClass="rbToggleRadioChecked" />
                        <telerik:RadButtonToggleState Text="Yes" PrimaryIconCssClass="rbToggleRadio" />
                  </ToggleStates>
              </telerik:RadButton>
              <telerik:RadButton ID="Q3_2" runat="server" Text="No" ToggleType="Radio"  ButtonType="StandardButton" GroupName="Q3" Width="100px" AutoPostBack="false" CausesValidation="false">
                  <ToggleStates>
                        <telerik:RadButtonToggleState Text="No" PrimaryIconCssClass="rbToggleRadioChecked" />
                        <telerik:RadButtonToggleState Text="No" PrimaryIconCssClass="rbToggleRadio" />
                  </ToggleStates>
              </telerik:RadButton>
              <telerik:RadButton ID="Q3_3" runat="server" Text="Maybe"  ToggleType="Radio" ButtonType="StandardButton" GroupName="Q3" AutoPostBack="false" Width="100px" CausesValidation="false">
                  <ToggleStates>
                        <telerik:RadButtonToggleState Text="Maybe" PrimaryIconCssClass="rbToggleRadioChecked" />
                        <telerik:RadButtonToggleState Text="Maybe" PrimaryIconCssClass="rbToggleRadio" />
                  </ToggleStates>
              </telerik:RadButton>
            </asp:WizardStep>
        </WizardSteps>
    </asp:Wizard>
  5. Slav
    Admin
    Slav avatar
    1356 posts

    Posted 23 May 2012 Link to this post

    Hi Jeremy,

    You can utilize a CustomValidator control that verifies the state of the RadButtons in the group and validates the page based on this information. You can find attached a sample page that demonstrates this approach. Please use it as a reference for implementing this feature into your actual project.

    All the best,
    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.
  6. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 23 May 2012 Link to this post

    Hi Jerk,

    Try the following code snippet.

    C#:
    public static int flag = 0;
        protected void Wizard1_FinishButtonClick(object sender, WizardNavigationEventArgs e)
        {
            if (flag == 0)
            {
                e.Cancel = true;
            }
        }
        protected void buttonClick(object sender, EventArgs e)
        {
            flag = 1;
        }
       
        protected void Wizard1_NextButtonClick(object sender, WizardNavigationEventArgs e)
        {
            if (flag == 0)
            {
                e.Cancel = true;
            }
            else {
                flag = 0;
            }
        }

    Thanks,
    Princy.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017