CODEWITHSUNDEEP
javascriptcssknockout.jskendo-uiwidth
user5260143
user5260143

Reputation: 1098

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

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} " />

Upvotes: 3

Views: 605

Answers (1)

nemesv
nemesv

Reputation: 139788

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.

Upvotes: 1

Related Questions