0

私は 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,            
        }" />
4

1 に答える 1

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

ここでデモ。

于 2013-12-29T15:52:41.043 に答える