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>

ButtonType="StandardButton" 
    ToggleType="CheckBox"

Current state:

• normal state (notSelectedButton): clickable and loads OnCommand event when clicked.
• selected/checked state (selectedButton): clickable and loads OnCommand event when clicked.

What I need the button to do:

• normal state (notSelectedButton): stay the same - be clickable and load OnCommand="videoClicked" event.
• selected/checked state (selectedButton): be clickable but disable OnCommand event. I want it to go back to normal state (like an on/off switch).

My example code below shows what I have so far. I don't know if this should be done client side or code behind? Any suggestions are welcomed.

aspx code:

<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>
  </div>
</ItemTemplate>

Hi there,

I would like to see the focus on the rows or just in the Visibility cell when I'm navigating through the grid using the keyboard and if I press enter, make a click on the toggle button to change the visibility. 

Also, I´m adding in the clientSettings 

Hi there, 

I have a radtoggleButton in a grid with two states and I´m creating the new rows using a DataTable source of the Grid.

My question is how I can use the datable to set the second state of the toggle button.

This is how the grid looks like: 

And this is the column template for the grid. 

I´ve tried to set the value as newRow("Visibility") = "Hide"  or adding the button directly to this cell of the row. 

Let me know if you have some ideas, please.

Thanks, 

Alvaro.

I have a rad grid and on every row i have rad toggle button, now i want whenever user change state of toggle button then in javascript i have to get row index of rad grid.

I have written following

its giving me toggle button that state just changed but now i want row index of radgrid where this control resides

I want to use Toggle radio button in rad grid and want to bind it with data coming from server.

Please share the demo of it.

Has anyone else noticed that if you have RadButtons which use embedded icons, if you then add a RadToggleButton the positions of the embedded icons in the RadButtons change? They move leftward so that part of the icon overlaps the left edge of the RadButton. You have to move them in (left) by 2px to get them back where they should be!

Has anyone also noticed that, by default, the RadToggleButton exceeds the RadButton in height so aligning them adjacent to each other is a little difficult?