Remove NumericTextBox widget from textbox

Question

I have found some answers that explain how to remove the Kendo UI kendoDatePicker widget from a textbox here http://www.kendoui.com/forums/ui/general-discussions/method-for-removing-controls.aspx and here http://www.kendoui.com//forums/ui/date-time-pickers/datepicker-becomes-static.aspx

Unfortunately the above examples do not seem to help when i try to remove the property of a NumericTextBox. I ended up with the source below.

var numericTextBox = $(selector).data("kendoNumericTextBox");
    var element = numericTextBox.wrapper[0] ? numericTextBox.wrapper
            : numericTextBox.element;

    // unwrap element
    var input = numericTextBox.element.show();
    input.removeClass("k-input").css("width", "12.4em");
    input.removeClass("numerictextbox");
    input.insertBefore(numericTextBox.wrapper);

    numericTextBox.wrapper.remove();

    input.removeAttr("data-role");
    input.removeAttr("role");

I finally end up with a text box that looks like a simple textbox but i am still not allowed to add anything else than just numbers. Furthermore i tried adding also the line input.removeData("kendoNumericTextBox"); which is close to what is suggested on the links i have posted above, but i could not identify what this line does.

Answer 1

Instead of playing with the widget decoration converting from text to numeric and viceversa it's much easier having both and have always one of them hidden. You just need to add a class / remove a class and get the correct one visible.

Lets say that I have the following CSS definition:

.ob-hide {
    display: none;
}

The following HTML:

<div id="combobox"></div>
<div id="number"></div>
<div id="text"></div>

Then my JavaScript would be:

$("#combobox").kendoDropDownList({
    dataSource: {
        data: [ "string", "number" ]
    },
    value     : "string",
    change    : function (e) {
        console.log("change");
        if (this.value() === "string") {
            console.log("string");
            $("#number").closest(".k-numerictextbox").addClass("ob-hide");
            $("#text").closest(".k-autocomplete").removeClass("ob-hide");
        } else {
            console.log("number");
            $("#number").closest(".k-numerictextbox").removeClass("ob-hide");
            $("#text").closest(".k-autocomplete").addClass("ob-hide");
        }
    }
});
$("#number").addClass("ob-hide").kendoNumericTextBox({});
$("#text").kendoAutoComplete({});