如何在 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;
}

在combobox里面，可以绑定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/

fiddle you can find here: http://jsfiddle.net/Icepickle/gLbLtjhf/

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