Change width of a kendo numerictextbox at runtime

Question

I'm using Kendo UI numerictextbox. I need to change the width of a numerictextbox at runtime, according to external conditions. After invoking kendoNumericTextBox, for some events in the javascript I would like to change the width of the input part of k-numerictextbox. I'm not able to get it right.

As I understand Kendo uses two inputs: one for displaying the value (with readonly attribute) and the other for editing and the editable one is identified by the id I use.

I realized the hierarchy of classes created is:

class="k-widget k-numerictextbox"  
class="k-numeric-wrap k-state-default k-expand-padding"  
class="k-formatted-value k-numerictextbox k-input"   
input = "myId" class="k-numerictextbox k-input" 

So when I use $(#myid).width(newwidth); I am not changing the width of the field, worst I get an effect of enlarging (newwidth greater than oldwidth) at the level of the above k-numeric-wrap while the input part remains the same.

Answer 1

You don't have to change the width of the input but of the wrapper.

Do this:

$("#numeric").data("kendoNumericTextBox").wrapper.width("300px");

Where numeric is the id of the input corresponding to the Numeric Text Box.

Running example here : http://jsfiddle.net/OnaBai/7LBJG/