set width for kendo combo without using its Id

Question

I work in durandal project, and want to know: What is the way to define width for kendo-ui combobox?

I see this question at link Set kendo ui dropdownlist width, but the answer there not good for me, becouse I don't want to use the combo Id.

(Why isn't there simple way to do it as combo- property, like you can define its hight simply?)

Here is my html code:

   <input id="myCombo" data-bind=" value:'444',        
        kendoDropDownList: { dataSource: data,
        dataValueField:itemValue,
        dataTextField: itemText,
        value:selectedId,            
        }" />

Answer 1

I guess there is no width option because the widget defaults to the input's width, so for the typical use case, there is no need to specify a width separately. If you want a separate option for the width of the dropdown-container, you can simply create your own widget that reads a listWidth option:

(function ($) {
    var ui = kendo.ui,
        DropDownList = ui.DropDownList;

    var CustomDropDownList = DropDownList.extend({
        init: function (element, options) {
            DropDownList.fn.init.call(this, element, options);

            if (options.listWidth) {
                this.list.width(options.listWidth);
            }
        },

        options: {
            name: 'CustomDropDownList'
        }
    });

    ui.plugin(CustomDropDownList);
})(jQuery);

which you can then use like this:

$("#c2").kendoCustomDropDownList({
    dataTextField: "text",
    dataValueField: "value",
    listWidth: 400,
    dataSource: [{
        text: "Item1",
        value: "1"
    }, {
        text: "Item2",
        value: "2"
    }]
});

If you want to declare the listWidth in a declarative fashion, you can use an init method like this one:

init: function (element, options) {
    options.listWidth |= $(element).attr('data-list-width');

    DropDownList.fn.init.call(this, element, options);

    if (options.listWidth) {
        this.list.width(options.listWidth);
    }
}

and use like this:

<input data-role='customdropdownlist' data-list-width="150"/>

Demo here.