javascript - 如何在 Kendo UI 中设置组合框的自动宽度？

Question

我想根据绑定(bind)到组合框的最长文本自动设置组合框宽度，所以我尝试如下所示，但我只能看到下拉菜单的自动大小(宽度)(下拉菜单单击组合框的组合时，长度仍然大于预期，总长度应减少到仅包含 3 个字符，我在这里遗漏了什么吗？

<input id="combobox" />

$("#combobox").kendoComboBox({
  index: 0,
  dataSource: {
    data: ["One", "Two"]
  }
});
var comboBox = $("#combobox").data("kendoComboBox");
comboBox.list.width("auto");
$("#combobox").width(parseInt($("#combobox").css("width")));

http://jsfiddle.net/KendoDev/Z4rwQ/

Answer 1

我想您可以确定数据源本身的长度，然后调整组合框的大小。这适用于演示元素，但我想根据样式和填充，您可能需要对调整大小的技术进行更多改进。

这决定了元素的大小(同样，如果您在数组中使用对象而不是字符串，您可能需要对其进行一些改进(如果您愿意，可以传递 displayMember)

function determineWidth(ds) {
    var l = ds.length, selement = document.createElement('span'), maxwidth = 0, curwidth = 0;
    selement.style = 'position: fixed; left: -500px; top: -500px;';
    document.body.appendChild(selement);
    for (var i = 0; i < l; i++) {
        $(selement).html(ds[i]);
        curwidth = $(selement).width();
        if (curwidth < maxwidth) {
            continue;
        }
        maxwidth = curwidth;
    }
    document.body.removeChild(selement);
    return curwidth + 24;
}

在组合框中，您可以绑定(bind)到 dataBound 事件，确定元素的大小，并更新容器和父级以匹配实际大小

$("#combobox").kendoComboBox({
    index: 0,
    dataSource: {
        data: ["One", "Two", "Hundred"]
    },
    dataBound: function() {
        var width = determineWidth(this.dataSource.data());
        $('#combobox-container').find('span>.k-dropdown-wrap').width(width).parent().width(width);
    }
});
var comboBox = $("#combobox").data("kendoComboBox");

您可以在这里找到 fiddle :http://jsfiddle.net/Icepickle/gLbLtjhf/