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

debugcn 发表于 Dev

开发人员

我想根据绑定到组合框的最长文本自动设置组合框的宽度，因此我尝试如下所示，但是我只能看到自动尺寸（宽度）用于下拉菜单（单击组合框），但长度仍比预期的长，总长度应减少为仅容纳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/

冰刺

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

这决定了元素的大小（同样，如果您使用对象而不是数组内部的字符串，则可能需要对其进行一些优化（如果需要，可以通过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;
}

在组合框中，您可以绑定到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");

小提琴，您可以在这里找到：http : //jsfiddle.net/Icepickle/gLbLtjhf/

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。