0

我想根据绑定到组合框的最长文本自动设置组合框宽度，所以我尝试如下，但我只能看到下拉菜单的自动大小（宽度）（单击时下拉combo) 的组合框，长度仍然大于预期，总长度应该减少到只能容纳 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/

4

3 回答 3

3

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

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

于 2014-08-03T20:06:46.450 回答
2

我想补充一点，如果您想拥有固定宽度的组合框而不考虑数据项长度，那么在定义组合框时定义“ 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);

参考链接

于 2014-09-08T13:29:07.440 回答
0

尝试添加这个 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);
}

演示

更新

也许您需要包装组合框并用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);
}

更新的演示

于 2014-08-03T16:11:16.393 回答