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

[Mando]

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>

[Vessy]

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