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.

Something very basic, what are you trying to get accomplished (final goal)? I'd like to understand what you are trying to finally get because maybe there is some easier way of getting it done that start stripping down `numericTextBox`. — OnaBai, Feb 09 '13 at 06:14
I have a kendoNumericTextBox which i want to convert to a simple input textfield. In more detail. I have a combobox which has int and string types. When selecting an int value from the list then the input field transforms to kendoNumericTextBox. This part works. What does not work is reverting the kendoNumericTextBox back to a simple input text field when a string value is selected. — Stephan, Feb 11 '13 at 08:02

score 2 · Accepted Answer · answered Feb 11 '13 at 09:55

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({});

Great idea ! That reduced my code a lot. Worked like a charm. Thank you very much once again ! — Stephan, Feb 11 '13 at 13:02
Great idea ! That reduced my code a lot. Worked like a charm. — Stephan, Feb 11 '13 at 13:02

Remove NumericTextBox widget from textbox

1 Answers1