如何在Kendo UI中设置组合框的自动宽度？ [英] How to set the auto width for combo box in Kendo UI?

问题描述

我想根据绑定到组合框的最长的文本自动设置组合框宽度，所以我试着像下面，但我能够看到自动大小（宽度）只下拉（下拉当点击组合框）的组合框，仍然长度大于预期，总长度应该减少为只保留3个字符，我缺少这里的东西？

I want to set the combo box width automatically based on the lengthiest text which is bound to the Combo box, so I tried like below, but I am able to see the auto size (width) only for drop down (drop down when clicking the combo) of the combo box, still the length is greater than expected, the overall length should be reduced to hold only 3 characters, am I missing something here?

>

<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/

推荐答案

我想你可以数据源本身的长度，然后调整组合框的大小。这适用于一个演示项目，但我想根据样式和填充，你可能需要一些更精炼到大小调整技术。

I guess you could determine the length in the datasource itself, and then resize the combobox. This works for a demo project, but i guess depending on styles and padding that you might need to to some more refining to the sizing technique.

这决定了大小元素（再次，如果你使用对象而不是数组中的字符串，你可能需要细化一点（如果你愿意，可以传递displayMember）

This determines the size of the elements (again, in case you are using objects instead of strings inside the array, you might need to refine it a bit (you could pass the displayMember if you'd like)

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事件，确定元素的大小，容器和父项匹配实际大小

inside the combobox, you can bind to the dataBound event, determine the size of the elements, and update the container and parent to match the actual size

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

这篇关于如何在Kendo UI中设置组合框的自动宽度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！