установить ширину для комбо кендо без использования его идентификатора

Я работаю в проекте Durandal и хочу знать: как определить ширину поля со списком kendo-ui?

Я вижу этот вопрос по ссылке Установить ширину раскрывающегося списка пользовательского интерфейса кендо, но ответ там не очень хороший для меня, потому что я не хочу использовать комбо-идентификатор.

(Почему нет простого способа сделать это как комбо-свойство, например, вы можете просто определить его высоту?)

Вот мой html-код:

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

html jquery kendo-ui kendo-dropdown durandal-2.0
person user5260143    schedule 29.12.2013    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Я предполагаю, что нет опции 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: 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"/>

Демо здесь.

person Lars Höppner    schedule 29.12.2013