RadButton to toggle RadNumericTextBox's enabled and disabled

[Tri]

Hi,

I'm trying to add a RadButton as checkbox type to toggle "Enabled" and "Disabled" a RadNumericTextBox. Can someone help me please?

 

ASPX Code:

<td>
    <telerik:RadNumericTextBox ID="PAPTestDays" runat="server" DataType="System.Int32" Font-Names="Calibri" Font-Size="9pt" MaxLength="3" Skin="Metro" Width="100px">
        <NegativeStyle Resize="None" />
        <NumberFormat DecimalDigits="0" ZeroPattern="n" />
        <EmptyMessageStyle Resize="None" />
        <ReadOnlyStyle Resize="None" />
        <FocusedStyle Resize="None" />
        <DisabledStyle Resize="None" />
        <InvalidStyle Resize="None" />
        <HoveredStyle Resize="None" />
        <EnabledStyle Resize="None" />
    </telerik:RadNumericTextBox>
    <asp:RangeValidator ID="PAPTestDaysxRangeValidator" runat="server" ControlToValidate="PAPTestDays" ErrorMessage="This value should be between 30 and 365!" Display="Dynamic"
             MaximumValue="365" MinimumValue="30" Type="Integer" ForeColor="Red" Font-Names ="Calibri" Font-Size="9pt">
    </asp:RangeValidator>
    <telerik:RadButton RenderMode="Lightweight" ID="PAPTestDaysEnabled" runat="server" ToggleType="CustomToggle" ButtonType="ToggleButton" AutoPostBack="False" OnClientCheckedChanged="PAPTestDaysEnabled_OnCheckedChanged">
        <ToggleStates>
         <telerik:RadButtonToggleState Text="" PrimaryIconCssClass="rbToggleCheckbox" />
         <telerik:RadButtonToggleState Text="" PrimaryIconCssClass="rbToggleCheckboxChecked" />
        </ToggleStates>
    </telerik:RadButton>
</td>

JavaScript Code:

function PAPTestDaysEnabled_OnCheckedChanged() {
    var checkBox = $find("<%= PAPTestDaysEnabled.ClientID %>");
    var PAPTestDaysTextBox = $find("<%= PAPTestDays.ClientID %>");
    if (checkBox.get_checked()) {
        PAPTestDaysTextBox.enable();
    } else {
        PAPTestDaysTextBox.disable();
    }
}

[Rumen]

Hi Tri,

Just set the ToggleType property to "CheckBox":

<telerik:RadNumericTextBox RenderMode="Lightweight" ID="PAPTestDays" runat="server" DataType="System.Int32" Font-Names="Calibri" Font-Size="9pt" MaxLength="3" Skin="Metro" Width="100px">
    <NegativeStyle Resize="None" />
    <NumberFormat DecimalDigits="0" ZeroPattern="n" />
    <EmptyMessageStyle Resize="None" />
    <ReadOnlyStyle Resize="None" />
    <FocusedStyle Resize="None" />
    <DisabledStyle Resize="None" />
    <InvalidStyle Resize="None" />
    <HoveredStyle Resize="None" />
    <EnabledStyle Resize="None" />
</telerik:RadNumericTextBox>

<telerik:RadButton RenderMode="Classic" ID="PAPTestDaysEnabled" runat="server" ToggleType="CheckBox" ButtonType="ToggleButton" AutoPostBack="False" OnClientCheckedChanged="PAPTestDaysEnabled_OnCheckedChanged">
    <ToggleStates>
        <telerik:RadButtonToggleState Text="" PrimaryIconCssClass="rbToggleCheckbox" />
        <telerik:RadButtonToggleState Text="" PrimaryIconCssClass="rbToggleCheckboxChecked" />
    </ToggleStates>
</telerik:RadButton>


<script type="text/javascript">
    function PAPTestDaysEnabled_OnCheckedChanged(sender, args) {
        var checkBox = sender;
        alert(checkBox.get_checked());
        var PAPTestDaysTextBox = $find("<%= PAPTestDays.ClientID %>");
        if (checkBox.get_checked()) {
            PAPTestDaysTextBox.enable();
        } else {
            PAPTestDaysTextBox.disable();
        }
    }
</script>

You may also try the newer RadCheckBox control.

Regards,
Rumen
Progress Telerik