[Solved] Disabling NumericTextBox and Model Binding

[Igor]

Hello Telerik,

I would like to share a work around that I have created, that you might find useful to include in the next release. I have several forms where dynamically certain fields need to be enabled at one point in time and disabled at other to prevent user input. For the most part I just want the text box to look "disabled", without the ability to enter values directly or with the spinner buttons, and to appear with grayed out text. Naturally I tried the api that is supplied with this control, the disable() method. Since the controls that are disabled cannot be successful, their state is invalid and they are not included with the POST method, and therefore do not get bound to the Model.

I went through the telerik.textbox.js and created an override for the enable and disable functions. My java script resides in a separate file and is registered right after the telerik.textbox.js script, and will not be affected by future updates to the telerik mvc controls. The difference is that I have swapped the "disabled" attribute with "readonly". The end result is that you get this extra functionality. Perhaps the "readonly" functions should be their own methods that don't clash with the "disabled" ones, since that functionality is still necessary just not in all situations.

(function ($) {
        var $t = $.telerik;
        $t.textbox.prototype.enable = function () {
            var $buttons = this.$wrapper.find('.t-arrow-up, .t-arrow-down'),
                clearTimerProxy = $.proxy(this._clearTimer, this);

            this.enabled = true;
            this.$element.removeAttr("readonly");

            if (!this.val && this.val != 0) {
                this.$text
                    .addClass('t-state-empty')
                    .html(this.text);
            } else {
                this._hideTextBoxValue();
            }
            this.$wrapper.removeClass('t-state-disabled');
            $buttons.unbind('mouseup').unbind('mouseout').unbind('dblclick')
                    .bind({
                        mouseup: clearTimerProxy,
                        mouseout: clearTimerProxy,
                        dblclick: clearTimerProxy
                    });

            var eventName = "mousedown";
            $buttons.eq(0)
                    .unbind(eventName)
                    .bind(eventName, $.proxy(function (e) {
                        this._stepper(e, 1);
                    }, this));

            $buttons.eq(1)
                    .unbind(eventName)
                    .bind(eventName, $.proxy(function (e) {
                        this._stepper(e, -1);
                    }, this));
        }

        $t.textbox.prototype.disable = function () {
            var that = this;
            that.enabled = false;

            that.$wrapper
                .addClass('t-state-disabled')
                .find('.t-icon')
                    .unbind('mousedown')
                    .bind('mousedown', $t.preventDefault);

            that.$element.attr('readonly', 'readonly');
            that.$text.css("color", "");

            if (!that.val && that.val != 0) {
                that.$text.html('');
            } else {
                that._hideTextBoxValue();
            }
        }
})(jQuery);

Here is a minified version of the same work around:

(function (a) { var b = a.telerik; b.textbox.prototype.enable = function () { var h = this.$wrapper.find(".t-arrow-up, .t-arrow-down"), i = a.proxy(this._clearTimer, this); this.enabled = true; this.$element.removeAttr("readonly"); if (!this.val && this.val != 0) { this.$text.addClass("t-state-empty").html(this.text) } else { this._hideTextBoxValue() } this.$wrapper.removeClass("t-state-disabled"); h.unbind("mouseup").unbind("mouseout").unbind("dblclick").bind({ mouseup: i, mouseout: i, dblclick: i }); var j = "mousedown"; h.eq(0).unbind(j).bind(j, a.proxy(function (k) { this._stepper(k, 1) }, this)); h.eq(1).unbind(j).bind(j, a.proxy(function (k) { this._stepper(k, -1) }, this)) }, b.textbox.prototype.disable = function () { var h = this; h.enabled = false; h.$wrapper.addClass("t-state-disabled").find(".t-icon").unbind("mousedown").bind("mousedown", b.preventDefault); h.$element.attr("readonly", "readonly"); h.$text.css("color", ""); if (!h.val && h.val != 0) { h.$text.html("") } else { h._hideTextBoxValue() } } })(jQuery);

Hope this helps.

Thanks,
Igor

[Georgi Krustev]

Hi Igor,

 
The "readonly" functionality seems reasonable and we most probably will add it in one of our next releases.

Kind regards,
Georgi Krustev
the Telerik team