我想根据绑定(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")));
最佳答案
我想您可以确定数据源本身的长度,然后调整组合框的大小。这适用于演示元素,但我想根据样式和填充,您可能需要对调整大小的技术进行更多改进。
这决定了元素的大小(同样,如果您在数组中使用对象而不是字符串,您可能需要对其进行一些改进(如果您愿意,可以传递 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/
关于javascript - 如何在 Kendo UI 中设置组合框的自动宽度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25106453/