为剑道组合设置宽度而不使用其 ID答案

【问题标题】：set width for kendo combo without using its Id为剑道组合设置宽度而不使用其 ID
【发布时间】：2024-05-03 10:45:02
【问题描述】：

我在 durandal 项目工作，想知道： kendo-ui组合框的宽度定义方法是什么？

我在链接Set kendo ui dropdownlist width 看到了这个问题，但那里的答案对我不利，因为我不想使用组合 ID。

（为什么没有简单的方法将其作为组合属性，就像您可以简单地定义它的高度一样？）

这是我的html代码：

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

【问题讨论】：

标签： jquery html kendo-ui durandal-2.0 kendo-dropdown

【解决方案1】：

我猜没有width 选项，因为小部件默认为输入的宽度，所以对于典型的用例，不需要单独指定宽度。如果您想要一个单独的下拉容器宽度选项，您可以简单地创建自己的小部件，读取 listWidth 选项：

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

然后你可以像这样使用它：

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

如果你想以声明的方式声明listWidth，你可以使用像这样的init方法：

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

并像这样使用：

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

演示here.

【讨论】：