using knock-out for width of kendo-ui input wrraper

Question

I work in durandal project (where javascript and html written in separated pages). I have kendo-combo, and I give it width by declare the wrraper-input width. It works well. But when I change it to be binded- it does not work. here is my code (which is not working):

html:

<input id="kendoCombo" data-bind=" value:'444', style:{width:width},
        kendoDropDownList: { dataSource: data,
        dataValueField:itemValue,
        dataTextField: itemText,
        value:selectedId,
        template: template,
        change:onChange}" />

javascript:

width:ko.observable('100px')

When my width has not been binded yet, it works well. Here is my previous html code:

<input style="width:100 
      id=" kendoCombo " 
      data-bind=" value: '444',
      kendoDropDownList: { dataSource: data,      
                           dataValueField:itemValue,
                           dataTextField: itemText,
                           value:selectedId, 
                           template: template,
                           change:onChange} " />

Answer 1

The problem is that Kendo only set the width of the DropDownList once when it is initialized, so when Knockout updates the width in the style binding it has no effect on the DropDownList .

However you can set width on the wrapper property (requires: Q1 2013 (version 2013.1.319) or newer) of the kendoDropDownList and you can put this logic into a custom bindingHandler:

ko.bindingHandlers.kendoDropDownListWidth = {
    update: function (element, valueAccessor) {
        var dropdownlist = $(element).data("kendoDropDownList");
        dropdownlist.wrapper[0].style["width"] = 
            ko.utils.unwrapObservable(valueAccessor());
    }
};

And use it like this:

<input id="kendoCombo" data-bind=" value:'444', 
        kendoDropDownListWidth: width,
        kendoDropDownList: { dataSource: data,
        dataValueField:itemValue,
        dataTextField: itemText,
        value:selectedId,
        template: template,
        change:onChange}" />

Demo JSFiddle .