How to Disable RadButton ToggleType CheckBox Link Click

1 Answer 44 Views
Button ToggleButton
Reece
Top achievements
Rank 1
Reece asked on 03 Feb 2022, 11:33 PM
Hello, I need some help with a Telerik RadButton that I have set up to work like a checkbox. It's loading the OnCommand click event each time that it's clicked. I need it to be more of a on/off switch. More details below.
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>

1 Answer, 1 is accepted

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

Hello Reece,

A possible approach you can try is to enable/disable the auto PostBack of the button depending on its current value (the OnCommand event will be triggered only when the AutoPostback is enabled):

        <telerik:RadButton
            RenderMode="Lightweight"
            runat="server"
            OnCommand="videoClicked"
            CommandArgument='videoId'
            ButtonType="StandardButton"
            ToggleType="CheckBox"
            ID="RadToggleButton1"
            AutoPostBack="true"
            OnClientClicking="onClicking">
            <ToggleStates>
                <telerik:RadButtonToggleState SecondaryIconCssClass="rbOk" Text="Selected" Value="selectedButton"></telerik:RadButtonToggleState>
                <telerik:RadButtonToggleState Text="Not Selected" Value="notSelectedButton"></telerik:RadButtonToggleState>
            </ToggleStates>
        </telerik:RadButton>
        <script>
            function onClicking(sender, args) {
                debugger;
                if (sender.get_value()=="selectedButton") {
                    sender.set_autoPostBack(false)
                }
                else {
                    sender.set_autoPostBack(true)
                }
            }
        </script>

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
Button ToggleButton
Asked by
Reece
Top achievements
Rank 1
Answers by
Vessy
Telerik team
Share this question
or