Disabling a numeric Textbox

[Anil]

Good morning. I have a numeric textbox on my view as follows:

 

<%= Html.Telerik().IntegerTextBox().Name("IntegerTextBox")

.MinValue(-5)

.MaxValue(10) %>

I want to disable it, so that nothing could be typed in the textbox, and it should be grayed out.
I am doing it using jQuery,

 

$(

function() {

 

$(

"#IntegerTextBox").attr("disabled", true)

 

$(

"#IntegerTextBox-input-text").attr("disabled", true)

 

$(

"#IntegerTextBox").find('a').unbind('mousedown')

 

});

It grays out the textbox, but does not disable it. Please suggest the way to disable it, so that nothing could be typed in it.
Thanks
Anil

[Georgi Krustev]

Hello Anil,

Please examine the test project which I have created in order to achieve your goal.

Sincerely yours,
Georgi Krustev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Anil]

Thanks, that works. But when I try to put the same logic on page load like this,

 

<%

= Html.Telerik().NumericTextBox()

 

.Name(

"NumericTextBox")

 

.Value(1)

%>

$(

function() {

 

 

 var $NumericTextBox = $('#NumericTextBox');

 

 

 $NumericTextBox.find('> #NumericTextBox-input-text').attr('disabled', true);

 

 

 $NumericTextBox.find('.t-arrow-up, .t-arrow-down').unbind('mousedown');

 

});

it does not work. I do not want to disable it on click of a button. It should be disabled on page load. Please suggest what is wrong.

Thanks
Anil

[Atanas Korchev]

Hello Anil,

You should use the OnLoad event of the textbox or OnDocumentReady of the ScriptRegistrar. Here is an example for the first option:

<%= Html.Telerik().NumericTextBox()
                  .Name("NumericTextBox")
                  .Value(1)
                  .ClientEvents(events => events.OnLoad("onLoad"))
%>

<script type="text/javascript">
function onLoad() {
    var $NumericTextBox = $('#NumericTextBox');
    $NumericTextBox.find('> #NumericTextBox-input-text').attr('disabled', true);
    $NumericTextBox.find('.t-arrow-up, .t-arrow-down').unbind('mousedown');
}
</script>


All the best,
Atanas Korchev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Anil]

Thanks. It works. I am also using the onchange event. But, the problem is that when onchange of value from, lets say, 30 -> 32,

<%

= Html.Telerik().CurrencyTextBox()

 

.Name(

"CurrTxtBoxNACost")

 

.Spinners(

true)

 

.MinValue(0)

.MaxValue(

decimal.MaxValue).Value(Model.NewAdditionCost)

 

.ClientEvents(events => events.OnLoad(

"onLoadNACost"))

 

.ClientEvents(events => events.OnChange("onChange"))
%>
 
in the onChange function, I get 30 as the value and not the most recent value 32.

 

 

var amtNewAddition = $("#CurrTxtBoxNACost-input").val(); ( this value should be the most recent value 32, not the value that was changed (i.e. 30).

Please let me know if there is a way to get the most recent value onChange event or OnBlur event. OnBlur event is not there in the API though.

Regards
Anil

 

[Georgi Krustev]

Hello Anil,

Unfortunately, I could not reproduce the depicted issue. I have used our online demo for the client-events.
to reproduce described problem, but to no avail. You can examine it and let us know what the differences are.

To get the most recent value, you can use .value() method. For more information check this help topic.

All the best,
Georgi Krustev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Grant Chapman]

How would a function look that reversed the effects of this disable and re-enabled the spinners on the side?

        function Disable() {
            var $NumericTextBox = $('#NumericTextBox');
            $NumericTextBox.find('> #NumericTextBox-input-text').attr('disabled', true);
            $NumericTextBox.find('.t-arrow-up, .t-arrow-down').unbind('mousedown');
        }

I can get the field enabled again, but I am unsure what events to rebind to the spinner arrows;

        function Enable() {
            var $NumericTextBox = $('#NumericTextBox');
            $NumericTextBox.find('> #NumericTextBox-input-text').removeAttr('disabled');
            // $NumericTextBox.find('.t-arrow-up, .t-arrow-down').bind( -- not sure what to do here? -- );
        }

Or is there a better way to do this?

Regards,
Grant Chapman

[Georgi Krustev]

Hello Grant Chapman,

You can try with the following code snippet:

function Enable() {
            var $NumericTextBox = $('#NumericTextBox');
            $NumericTextBox.find('> #NumericTextBox-input-text').removeAttr('disabled');

    var buttons = $NumericTextBox.find('.t-arrow-up, .t-arrow-down');


        $(buttons[0]).mousedown($.proxy(function (e) {
            $NumericTextBox.updateState();
            $NumericTextBox.stepper(e, 1);
        }, $NumericTextBox));

        $(buttons[1]).mousedown($.proxy(function (e) {
            $NumericTextBox.updateState();
            $NumericTextBox.stepper(e, -1);
        }, $NumericTextBox));

}

Greetings,
Georgi Krustev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Grant Chapman]

My sample View now looks like this (as per the example you posted in this thread) and the enable button does not re-enable the spinners.

<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    Home Page
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <h2><%= Html.Encode(ViewData["Message"]) %></h2>
    <%= Html.Telerik().NumericTextBox()
            .Name("NumericTextBox")
            .Value(1)
    %>
    <br />
    <input type="button" onclick="Disable()" value="Disable"/> <input type="button" onclick="Enable()" value="Enable"/>
    <script type="text/javascript">
        function Disable() {
            var $NumericTextBox = $('#NumericTextBox');
            $NumericTextBox.find('> #NumericTextBox-input-text').attr('disabled', true);
            $NumericTextBox.find('.t-arrow-up, .t-arrow-down').unbind('mousedown');
        }

        function Enable() {
            var $NumericTextBox = $('#NumericTextBox');
            $NumericTextBox.find('> #NumericTextBox-input-text').removeAttr('disabled');

            var buttons = $NumericTextBox.find('.t-arrow-up, .t-arrow-down');


            $(buttons[0]).mousedown($.proxy(function(e) {
                $NumericTextBox.updateState();
                $NumericTextBox.stepper(e, 1);
            }, $NumericTextBox));

            $(buttons[1]).mousedown($.proxy(function(e) {
                $NumericTextBox.updateState();
                $NumericTextBox.stepper(e, -1);
            }, $NumericTextBox));

        }
    </script>
</asp:Content>

[Georgi Krustev]

Hello Grant,

I totally forgot that to achieve your goal you need to get the client object of the NumericTextBox component. Here is the correct code snippet:

function Enable() {
    var $NumericTextBox = $('#NumericTextBoxTest');
    $NumericTextBox.find('> #NumericTextBoxTest-input-text').removeAttr('disabled');

    var buttons = $NumericTextBox.find('.t-arrow-up, .t-arrow-down');

    var numericTextBox = $NumericTextBox.data('tTextBox');
    $(buttons[0]).mousedown($.proxy(function (e) {
        numericTextBox.updateState();
        numericTextBox.stepper(e, 1);
    }, numericTextBox));

    $(buttons[1]).mousedown($.proxy(function (e) {
        numericTextBox.updateState();
        numericTextBox.stepper(e, -1);
    }, numericTextBox));

}

Kind regards,
Georgi Krustev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Grant Chapman]

Georgi,

Unfortunately that enable function does not seem to work at all.

I have a new question and I am happy to start a new thread if you like but what I need to do is;
 - set focus to a numerictextbox via jQuery (or javascript) once I have selected the previous field (which happens to be a combobox).

I have tried the following;

$("#Input").focus();
$("#Input-input-text").focus();
$("#Input").click();
$("#Input-input-text").click();

But I cannot seem to get the NumericTextBox to gain focus.

Regards,
Grant Chapman

[Georgi Krustev]

Hello Grant Chapman,

I have attached a simple test project, which implements the required functionality.

All the best,
Georgi Krustev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Grant Chapman]

Georgi,

Have just tried to enable or disable some Numeric Textboxes on $(document).ready() event within Jquery but have found that this doesnt work. Is there an event that I should be doing this in which is after the $(document).ready() event?

Without digging deeper I assume that these Numeric TextBox are initialised within a $(document).ready() event.

Regards,

Grant Chapman

[andy]

I can't get the textbox to disable with the onload event.  It fires up okay, but the numeric textbox isn't being effected.  possibly the onload event is premature.

I've also tried running sepparately as a $(document).ready(function() { ... })  but same issue.

Any ideas?

[Grant Chapman]

Georgi,

I am now running by form initialization code to disable some numerictextboxes in the $(window).load() event as this runs after all the $(document).ready() events.

Regards,

Grant Chapman