Удалить NumericTextBox виджет из текстового поля

Question

я нашел ответы на некоторые вопросы, которые объясняют, как удалить виджет Кендо UI kendoDatePicker из текстового поля здесь http://www.kendoui.com/forums/ui/general-discussions/method-for-removing-controls.aspx и здесь http://www.kendoui.com//forums/ui/date-time-pickers/datepicker-becomes-static.aspx

К сожалению, приведенные выше примеры, кажется, не помогает, когда я пытаюсь удалить свойство NumericTextBox. Я закончил с источником ниже.

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"); 

я, наконец, в конечном итоге с текстовым полем, который выглядит как простое текстовое поле, но я до сих пор не имеет права ничего больше, чем просто цифры. Кроме того, я попытался добавить также строку input.removeData ("kendoNumericTextBox"); который близок к тому, что предлагается по ссылкам, которые я опубликовал выше, но я не мог определить, что делает эта строка.

Answer 1

Вместо того, чтобы играть с украшением виджета, преобразуя его из текста в числовое и наоборот, гораздо проще иметь оба и всегда скрывать один из них. Вам просто нужно добавить класс/удалить класс и получить правильный вид.

Позволяет сказать, что у меня есть следующее определение CSS:

.ob-hide { 
    display: none; 
} 

Следующий HTML:

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

Тогда мой JavaScript будет:

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