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

Question

我想根据绑定到组合框的最长文本自动设置组合框宽度，所以我尝试如下，但我只能看到自动尺寸（宽度）下拉（下拉列表）当单击组合框的组合时，仍然长度大于预期，整体长度应该减少到只能容纳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;
}

在组合框内部，您可以绑定到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而不考虑数据项长度，那么在定义组合框时定义“ 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);

Reference Link

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

更新

也许你需要包装组合框并用div包装它。

<div id="combobox-container">
   <input id="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);
}

UPDATED DEMO