如何在Kendo UI中设置combobox的自动宽度？

我想根据绑定到combobox的最长文本自动设置combobox宽度，所以我尝试下面，但我只能看到下拉的自动大小（宽度）（单击时下拉combobox的combobox，仍然长度大于预期，整体长度应该减少到只能容纳3个字符，我在这里遗漏了什么？

 $("#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

我想你可以确定数据源本身的长度，然后调整combobox的大小。 这适用于演示项目，但我想根据样式和填充，你可能需要更多精炼到尺寸调整技术。

这决定了元素的大小（同样，如果您在数组中使用对象而不是字符串，您可能需要稍微改进它（如果您愿意，可以传递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; } 

在combobox内，您可以绑定到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/

Answer 2

我想补充一点，如果你想拥有一个固定宽度的comboBox而不管数据项长度如何，那么在定义combobox时定义“ HtmlAttributes ”属性：

  @(Html.Kendo().ComboBox().Name("myCombo") .DataTextField("Text") .DataValueField("Value") .Placeholder("--- Select ---") .DataSource(src => src.Read(read => read.Action("ActionMethod", "Controller"))) .HtmlAttributes(new { style = "width: 200px;"}) ) 

或者从javascript：

 var combobox = $("#combobox").data("kendoComboBox"); combobox.list.width(200); 

参考链接

Answer 3

尝试添加此CSS。

 .k-combobox { display: inline !important; } 

并注册开放活动

 open: function(e) { var width = $(".k-combobox").width(); $(".k-animation-container").width(width); $(".k-list-container").width(width - 4); } 

DEMO

更新

也许你需要包装combobox并用div包装它。

然后将jquery更改为

 open: function(e) { var width = $("#combobox-container").width(); $("#combobox-container").parent().find(".k-animation-container").width(width); $("#combobox-container").parent().find(".k-list-container").width(width - 4); } 

更新的演示