How to add limit to how many checkbox RadButtons can be selected?

1 Answer 14 Views
CheckBox ToggleButton
Reece
Top achievements
Rank 1
Reece asked on 03 Feb 2022, 11:36 PM

Hello, is there a way to limit how many checkbox buttons can be selected at one time by the client/enduser? We have a page that displays more than 10 buttons at a time (all brought in server side). The buttons are set up as Telerik RadButtons ButtonType="StandardButton" ToggleType="Checkbox". When the buttons are clicked they open up videos that get displayed at the top of the page and get put into a div. We have 5 spaces for the videos to display at the top of the page. I used CheckBox because of the selected/notselected (on/off) functionality. I want to limit the user to only selecting 5 buttons at a time. If the user has 5 buttons selected and tries to click the 6th one, a message should appear that tells them only 5 can be selected at a time. They can "turn off" unselect one of the buttons if they want to select another one. I'm having trouble figuring out how to approach this. Client side or code behind? Any help is appreciated, thanks!

  <ItemTemplate>
      <div class="itemWrapper">
        <telerik:RadButton 
        RenderMode="Lightweight" 
        runat="server" 
        OnCommand="videoClicked" 
        CommandArgument='<%# Eval("videoId") %>' 
        ButtonType="StandardButton" 
        ToggleType="CheckBox" 
        ID="RadToggleButton1" 
        AutoPostBack="true">
          <ToggleStates>
            <telerik:RadButtonToggleState SecondaryIconCssClass="rbOk" Text="Selected" Value="selectedButton"></telerik:RadButtonToggleState>
            <telerik:RadButtonToggleState Text="Not Selected" Value="notSelectedButton"></telerik:RadButtonToggleState>
          </ToggleStates>
        </telerik:RadButton>

1 Answer, 1 is accepted

Sort by
0
Vessy
Telerik team
answered on 08 Feb 2022, 08:18 PM

Hello Reece,

RadButton does not have such a built-in functionality, but you can easily implement it by having a counter in the s' OnClientCheckedChanging event.

For example:

            var counter = 0;

            function OnClientCheckedChanging(sender, args) {
                if (sender.get_text() == "Not Selected") {
                    if (counter < 5) {
                        counter++;
                    }
                    else {
                        alert("You can select only 5 items!")
                    }
                }
                else {
                    counter--;
                }
            }

 

Regards,
Vessy
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
CheckBox ToggleButton
Asked by
Reece
Top achievements
Rank 1
Answers by
Vessy
Telerik team
Share this question
or