Kendo UI NumericTextBox Enable/Disable Issue

Introduction

This trick will help you sort out the issue of enabling/disabling (for Kendo UI NumericTextBox).

Background

One of the best things of using a Kendo UI NumericTextBox is that you need not write custom validation separately to allow only Numbers (where the user input has to be Numeric) - however there is a caveat - the enable/disable functionality then, is not as simple as in case of a traditional / any other normal Textbox, for that matter. (I learned it the hard way though... after wasting a lot of time!!).

I needed to disable all AgenctFeeOverrides Textboxes when the repfirmDefault was empty.

Using the Code

// Kendo NumericTextBox html
@(Html.Kendo().NumericTextBoxFor(model => model.AgencyFeeOverride)
.HtmlAttributes(new { style = "width: 85px;font-size:10px;line-height:2em;",
id=Model.OrderDetailId.ToString() + "_agencyFeeOverride" })
.Enable(@Model.AgencyFeeDefault != null && 
@Model.IsViewReadOnly.ToString().ToLower() == "false")
.Decimals(4)
)

$(document).ready(function () 
{
    //Get Default value
    var repFirmDefault = $('#RepFirmNameDefault').text();
       
    //Get all AgencyFeeOverrideList
    var agencyFeeList = $('[id*=_agencyFeeOverride]');
    
    //To disable _agencyFeeOverride kendoNumericTextBox 
    if (repFirmDefault=="") 
        {
            for (var i = 0; i < repFirmFeeList.length; i++) 
            {
                var numerictextbox = $(repFirmFeeList[i]).data("kendoNumericTextBox");
                numerictextbox.enable(false);
            }
        }
});